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?
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.