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

What is Framer? Join the Community
Return to index
Arvi Raquel-Santos
Posted Aug 21 - Read on Facebook

With animation chaining, how do I get the animation to work again after the first click? At least on my end, I can't get the chained animation to start again.

2 Comments

Benjamin Den Boer

Hey Arvi Raquel-Santos - there are a couple of small edits needed to make this work:

1. By nesting all the AnimationEnd events, they effectively get called too many times. If you add a print within the second conditional statement, for instance, you'll see it already gets triggered three times. To fix this - simply call each statement once: "layerA.once Events.AnimationEnd, →" and so on.

2. Within the Click event, you continiously switch to the next state, while also listening to each included state. On Click, you'd want to start the "chain" - and thusly, always start at the beginning instead: "layerA.states.switch("one").

3. Finally, you want to reset the entire chain so the conditional statements don't produce an endless loop. So you'll need to add one more, that checks if the current state is "four" and then switches it back to the "default" state after its animation has ended. To produce a seamless loop, you'll likely also want the final x position of the layer to match that of the default state. You'll now notice that it's moved 10px, because of the x change in state "three" which never gets reset.

Arvi Raquel-Santos

Hey Benjamin, thanks for that, that helped a lot. Quick question, I'm adding another dimension to this with a chained animation within the chained animation. I assume I can do this with Utils.delay but also wondering if I can achieve it with a second AnimationEnd. I almost have this working but can't seem to get the last set of states to work.

http://share.framerjs.com/xpirffxz1e5e/

Read the entire post on Facebook