This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Drew Stock
Posted Mar 22 - Read on Facebook

How do people prefer to sequence chains of animations that require delays between each one?

Pretty sloppy I'm sure, but this is what I'm doing at the moment:

cycleUp.start();

cycleUp.on("end", function() {

cycleOver.start();

cycleOver.on("start", function() {

utils.delay(400, slideOver1());
utils.delay(800, slideOver2());

});
});

Seems to be only recognizing the 400ms delay so slideOver1() and slideOver2() are triggered at same time when what I'd like to do is stagger them.

Also, you'll notice that my animations are a combo of variables (i.e. cycleUp) and functions (i.e. slideOver1()). Any help cleaning up or pointing to best practices appreciated. Thanks Koen et al.

5 Comments

Drew Stock

figured it out (please send along cleaner ways to achieve, though):

declared animation functions as variables so now have...

swimmerOver = function(){
PSD.swimmer.animate ({
properties: {x: PSD.swimmer.x - stepTwo},
curve: "spring(500,30,800)"

});

};

yogaOver = function () {
PSD.yoga.animate ({
properties: {x: PSD.yoga.x - stepTwo},
curve: "spring(500,30,800)"

});

};

utils.delay(400, swimmerOver);
utils.delay(800, yogaOver);

--

thanks anyway :)

Koen Bok

Yeah I mostly do it like this. Sometimes I wrap every "stage" of an animation in a function and just set up a bunch of delays. Those are easy to tweak and swap around.

Florian Pnn

There is no way to put a "delay" into the animate properties like in a CSS animation?
It could be really useful I think

Koen Bok

Ill add that.

Florian Pnn

Koen Any update on the delay?

Read the entire post on Facebook