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

What is Framer? Join the Community
Return to index
Struan Fraser
Posted Mar 13 - Read on Facebook

Hello all, I've been having trouble with end of animation events for some time now. It seems to create very unpredictable behaviours. I've uploaded an example to demonstrate this - https://framer.cloud/pEaxU/.

Despite being controlled by the same behaviour, the outcome is often different.

Is there a best practice I can employ to avoid this or is this just a defect?

4 Comments

Steve Ruiz

Layer.onStateSwitchEnd sticks with a layer - it doesn't fire once and then go away. It also makes its definitions at the time the event is triggered, so if a variable changes before the stateSwitchEnd event fires, it won't remember what it used to be and use the new definition instead.

In the example you posted, when a layer moves down, it changes colors and advances select. Then, when the second event occurs, that first square moves back up, changes color to blue, and *also* advances select again, because that event hasn't been turned off. Meanwhile, the second square's onStateSwitch end also advances select, leading to the weird issue where the selection seems to skip ahead.

The best way to solve this is to store colourSquare[select] as a variable within the scope and then manipulate that variable, which is static, rather than something like colourSquare[select], which might change depending on what select is. Once you've stored the layers you want to manipulate, you don't have to wait to change select, and can do it right away. https://framer.cloud/RJuLM/

Ian McClure

It is hard to explain what is actually happening here so I added some prints to the project that should show you what is happening.

https://framer.cloud/lFeku

Ian McClure

I made an example that uses animation objects. Part of why this works is because of how animations work in Framer. From the docs: "If animations affect the same layer properties, only the last one will run." I am guessing that applying a new animation to a property cancels the previous animation, which will not trigger an animation end event.
I also commented things to explain what I am doing. I hope this helps!

https://framer.cloud/ItNuC

Struan Fraser

Thank you! Those were some incredibly comprehensive answers. I've only just now had a chance to take a look but that has helped so much!

Read the entire post on Facebook