Convert CSS3 animation to pure JavaScript

Question

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):

Plot

_{(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:

Plot 2

_{-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.

jQuery will give you events and timers, plus an animate method, that make this significantly easier. Otherwise you will have to setWindowTimeout yourself, and do these calculations. Frankly, it's probably silly to implement this yourself when jQueryUI has something well suited. docs.jquery.com/UI/Effects/Bounce If you really wanna roll your own, it may help to study its source. — Visionary Software Solutions
– Visionary Software Solutions, Commented Apr 6, 2013 at 10:55
This isn't CSS3 transitions; it's CSS3 animations. Transitions use the transition shorthand property. Animations use the animation shorthand property and @keyframes. — Matt Coughlin
– Matt Coughlin, Commented Apr 6, 2013 at 13:59
For your last question, just chucking a progress += 1; inside bounce works. see — searlea
– searlea, Commented Apr 6, 2013 at 18:23
@searlea See this how I wanted it but then without CSS3 animations, so I don't want this but that it appears just like the CSS3 animation. — user1480019
– user1480019, Commented Apr 6, 2013 at 18:46

Matt Coughlin · Accepted Answer · 2013-04-07 16:30:01Z

1

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.

<div onclick="start()">...</div>
...
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();
};

edited Apr 7, 2013 at 16:30

answered Apr 7, 2013 at 16:24

Matt Coughlin

18.9k3 gold badges48 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user1480019 Over a year ago

Whoa, thanks! It's working perfectly now! I've fixed one thing when the progress was 1 the bottom was: bottom: -0.000000000000002872847850556344px; by adding this document.getElementById('frame').style.bottom = "0px"; after if (progress == 1) { it's fixed. But this issue doesn't matter because the browser probably would read it as bottom: 0px;.

mrks · Accepted Answer · 2013-04-07 14:18:45Z

0

Given your code, it was just a small change: (http://jsfiddle.net/ELDf7/17/)

step: function(delta) {
  var animationHeight = to + element.scrollHeight
  element.style.bottom = (animationHeight * delta) + "px";    
}

Hope this is what you meant.

answered Apr 7, 2013 at 14:18

mrks

8,4532 gold badges37 silver badges67 bronze badges

1 Comment

user1480019 Over a year ago

Thanks, but the image goes not to 'bottom: ±50 px' but to 'bottom: ±180 px' it is possible that the image goes to 'bottom: ±50 px'?

Collectives™ on Stack Overflow

Convert CSS3 animation to pure JavaScript

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related