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

What is Framer? Join the Community
Return to index
DoYoon Kim
Posted Mar 29 - Read on Facebook

Hi, I've been trying to find a solution for this for hours so I thought I'd try asking others here :) Thanks in advance!

I have a layer (lyrX), which is triggered for animation (e.g. opacity = 0, Y = lyrX.y + 300) upon onTap of a button. I also have lyrX.onAnimationEnd so I can trigger a chain animation (e.g. lyrZ opacity=1).
Now, here's the issue I'm facing...
When I tap on the button again, I want to reverse the previous 2 animations in reverse order. So using the above example, I would fade out lyrZ... and lyrZ.onAnimationEnd I will make Y= lyrX.y-300 & opacity=1. However, since I already have lyrX.onAnimationEnd from earlier, as soon as the reverse animation finishes, it re-triggers lyrX.y+300 & opacity=0.
Is there a way to store the first onAnimationEnd as a variable or something, so that i can have a listener for that particular event? something like the following:
openingAnimation = lyrZ.onAnimationEnd ->
openingAnimation { lyrZ.onAnimationEnd -> ...}

or is it possible to "localize" a group of chained events and listener like the following?
groupName {
opacity:0, y: lyrX.y+300 }
lyrX.onAnimationEnd ->
properties: {

This way, lyrX.onAnimationEnd won't be triggered each time I set a new animation for lyrX.

Or if there's a better way altogether then that would be awesome!
Please let me know... and thank you!


Benjamin Den Boer

Hey DoYoon Kim, you could also try to use states, to toggle between different states on AnimationEnd. Otherwise, you can also definitely use functions (animEndA = → layer.onAnimationEnd → ...) to reference (call) them later.

DoYoon Kim

ah i see. ok great, thank you for your help! I'll definitely try it out :)

Read the entire post on Facebook