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

What is Framer? Join the Community
Return to index
Gregory J. Orton
Posted Aug 12 - Read on Facebook

Somebody help!

I'm trying to create some 'explosions' using circle layers and animation chaining.

Code here: https://repl.it/CmWg

Trouble is, if you copy and paste this code into framer, the first time you click it, the animation runs in order, but further clicks all see the animation run in reverse - even though I 'reset' the values changed by the animations at the end of it all.

Can anyone look at the code and solve the problem?

1 Comments

Floris Verloop

This is happening because you are starting a new animation after the AnimationEnd event has fired on the bubble layers. Every time an animation ends a new one starts, causing an endless loop.

You can solve this by creating separate animations with separate events. So instead of listening to events on the layer, you wait for a specific animation to end. You can do this with new Animation.

I've created an updated example where the animations are created inside of the loop. This way I can start them manually: http://share.framerjs.com/y18izm2egih9/

Read the entire post on Facebook