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 ->
or
openingAnimation { lyrZ.onAnimationEnd -> ...}
etc.

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

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!

2 Comments

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