jsguy/mithril.animate

looped animation

Closed this issue · 2 comments

I'm trying to make an infinite loop of, let's say one of the hover examples from the documentation. (the translateX one).
I want it not to be triggered by the hover, but to continously go back and forth. How would I go about that?

jsguy commented

I've added an example of how to do that with a key-frame based animation - you can see it here:

https://github.com/jsguy/mithril.animate/blob/master/examples/dizzycats.htm

The gist of it is that you use the callback that animateKF provides, so from the example:

var reAnimate = function(box){
    m.animateKF('spinBox', box(), { duration: 5000 }, function(el){
        reAnimate(box);
    });
};

We're simply animating again, once the animation is done.

There is also a bit of binding code in there, and most importantly, we need a reference to the DIV that we want to animate, so we grab that by using a prop in the controller and hook into it using the config attribute like so:

m.e("div.box", {config: c.box}, [

Let me know if the example makes sense.

Perfect!!
Thankyou very much.