11: Implementing the second ball shake

Now that we have one full shake, rotating from front to back and result, the next thing to do is create a shake animation for any clicks after the first.

If you remember from Step 8 in the 'Implementing the functions' section, we set the variable firstShakeCompleted = true; after the first shake was complete. Now because of this, we can create a condition for whether we need to run the first or second shake depending on whether this variable is true or false.

So to start, we'll need to again create a shake animation, but this time it will be for the back face of the magic 8 ball, rather than the front.

However, because we already created a class that contains the CSS keyframes of the shake animation for the front face, we can actually reuse the same class for the back.

Creating second shake

On the click event of the 8 ball to shake, I set a condition to first check if the first shake had completed, and if true, to instead add the shake class the back face elements instead of the front.

                                
    else if (firstShakeCompleted) {
        fadeOutResult();
        setTimeout(function(){
            $('#image8BallDarkBase, #image8BallShine, #image8BallDarkInnerCircle').addClass('shakeBall');           
            setTimeout(function(){
                $('#image8BallDarkBase, #image8BallShine, #image8BallDarkInnerCircle').removeClass('shakeBall'); 
                fadeInResult();
                setTimeout(function(){
                    clickDisabled = false;
                    $('#wrap8Ball').css('cursor', 'pointer');
                }, 3000);                                     
            }, 1500);   
        }, 500);
    }
                            

In the above I also created and referenced the function 'fadeOutResult', to fade the text to 0% opacity before shaking to create a smooth transition between the results.

                                
    function fadeOutResult(){
        $('#image8BallBlueTriangle, #image8BallBubble1, #image8BallBubble2, #image8BallBubble3, #htmlResultText').addClass('fadeOutTri');
        setTimeout(function(){
            $('#image8BallBlueTriangle, #image8BallBubble1, #image8BallBubble2, #image8BallBubble3, #htmlResultText').css('opacity', '0');
            $('#image8BallBlueTriangle, #image8BallBubble1, #image8BallBubble2, #image8BallBubble3, #htmlResultText').removeClass('fadeOutTri');
        }, 500);
    }
                            

This is the result so far: