Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Convert CSS3 animation to pure JavaScript

Convert CSS3 animation to pure JavaScript

Problem

I want to convert a simple CSS3 animation to pure JavaScript (not in jQuery, because I think it's overkill to load the entire library for such a simple thing).

It's about the animation bounceInUp from http://daneden.me/animate/. Sample demo: http://jsfiddle.net/ELDf7/

@keyframes bounceInUp {
    0% {
        opacity: 0;
        transform: translateY(2000px);
    }

    60% {
        opacity: 1;
        transform: translateY(-30px);
    }

    80% {
        transform: translateY(10px);
    }

    100% {
        transform: translateY(0);
    }
}

At http://javascript.info/tutorial/animation, there's a tutorial about how to do animations with JavaScript. But I'm not very good at mathematics, so I made a graph in PhotoShop to show how the animation should run in JavaScript (approximately):

(The graph plotter for other 'deltas' can be found here)

Is it possible to make a mathematical formula from this graph in pure JavaScript that returns the "delta" of the animation?

I've tried some things with the bounce function, but it didn't really work. (http://jsfiddle.net/ELDf7/2/)

Edit: I managed to make a good mathematical formula:

-Math.cos(2*Math.PI*progress) + Math.pow(progress, 1) * ((1.5 + 1) * progress - 1.5);

But now I've got another problem, the animation starts with half of the image showing, and not with the entire image hidden, like it appears like the CSS3 animation.

For a live demo of the JavaScript animation, see here: http://jsfiddle.net/ELDf7/14/

Does anyone know how I can change it so that the image is entirely hidden initially? Maybe it's possible to make a variable that contains the height of the image and then JavaScript makes a calculation so that the animation doesn't start until half of the image appears.

Problem courtesy of: user1480019

Solution

See if this updated demo is a step in the right direction.

Cosine wave

The mathematical formula needed to be refactored a little. The math for gradually scaling the cosine wave down to 0 wasn't quite working:

return -Math.cos(2.5 * Math.PI * progress) * Math.pow(0.33, progress * 2.5) * 3;

Sample values for the formula and for bottom, as progress goes from 0 to 1:

progress    formula    bottom
--------    -------    -------
  0.0        -3.0      -150px
  0.2         0.0         0px
  0.4         1.0        50px
  0.6         0.0         0px
  0.8        -0.3       -17px
  1.0         0.0         0px

start() function

I added a start() function, which is used when the page first loads and when the image is clicked. This function checks a global variable to make sure the animation isn't already running, before starting an animation. The global variable is reset when the animation finishes. Alternately, the current animation could be canceled and a new one started. But it needs to be one or the other, to avoid having multiple animations running at the same time, which looks bad visually.

...
... var isAnimationRunning = false; ... function start(){ if (isAnimationRunning) return; // Make sure an animation isn't already running isAnimationRunning = true; // Set the global variable move(document.getElementById('frame'), bounce, 1200); } onload = function() { start(); };
Solution courtesy of: Matt Coughlin

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Convert CSS3 animation to pure JavaScript

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×