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

What is Framer? Join the Community
Return to index
Edward Sanchez
Posted Feb 20 - Read on Facebook

Is there a way to create an animation sequence like
On LayerA
Move x to 200 in 1 second
then set opacity to 0
then move x to 100
then wait 1 second
then set opacity to 1
?

I tried animation chaining with AnimationEnd but when chaining on the same layer it seems to only work with a single chain, the subsequence animations happen at the same time.

Thanks!

6 Comments

Jay Walter Robinson

Have you tried wrapping the subsequence in Utils.delay?

Edward Sanchez

yeah, also used the delay option inside the animation - thought there would be a better way.

Now I'm having a different problem, this sequence should happen ONCE but during a DragMove. However, DragMove fires the animation every pixel it moves. So I tried having a boolean set to 1 outside the DragMove and then perform the animation inside an If statement where the boolean is set to 1, and inside the if statement, at the end of the animation sequence, set the boolean to 0. But for some reason, the animation is still getting triggered, even though when I print the boolean it has been set correctly. Don't know if I'm being dumb or if there's a bug with Framer's DragMove.

Benjamin Den Boer

Hey Edward. You can continue chaining animations as long as you keep calling each new AnimationEnd event within the previous one. You could also do this with states. I've tried to replicate what you've described here: http://share.framerjs.com/6xop73g1w4pz/

Is that what you're looking for? :)

Edward Sanchez

Thanks Benjamin Den Boer That's pretty much it - several ways to get it done it seems. The problem is the DragMove firing the sequence every pixel and my if statement not working. Let me create an anonymized version and share…

Benjamin Den Boer

Ah, I see. Yeah, an example of the issue would help. :)

Edward Sanchez

Ok, while making the example for you and extracting stuff, I seem to have solved the problem. http://share.framerjs.com/iomkyf8v1hjv/

Read the entire post on Facebook