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

What is Framer? Join the Community
Return to index
Emily Ellis
Posted Jun 20 - Read on Facebook

Hi! Just started playing with Framer today, and I'm having unexpected behaviors in my prototype.

Here's one that is especially confusing me, when I try to add a delay to an animation. I have a bubble (Points1) fading in when a button is clicked, then fading out.

With 0 delay to the fade-in animation, the bubble fades in and out as expected.
If I add a delay of .1, there is a flickering on the bubble when it fades in, and the fade-out is successful.
If I add a delay of .2 (or longer), there is no flickering on fade-in, but fade-out animation doesn't run and the bubble persists.

What am I missing here? Thanks!

4 Comments

Celeste DeMartis

Hi you! welcome to framer world! I'm not sure why that is being funky, but what you could do is use Utils.delay, .2 -> and then run Points1.animate

Celeste DeMartis

so basically dont put the delay in that points1 animation

Mike Johnson

Hard to see without the full view, but in the video at the bottom I can see you have and additional BTN_done.onAnimationEnd callback with a points1.animate function call. That second one is getting fired immediately and the first one (that you are editing) is re-triggering the event with a delay of 0.2 so it starts the animation over again, causing the flicker.

Emily Ellis

Update: I rewrote it using states, and figured out that it needed to be Points1.onAnimationEnd, have it grouped with BTN_done.animate instead of separate. Also discovered that some syntax changes seemed to have an effect on y position and other weird stuff, but overall I'm getting the hang of it!

Read the entire post on Facebook