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

What is Framer? Join the Community
Return to index
Patrick Arminio
Posted Jul 02 - Read on Facebook

Hi everyone! I was wondering if there's a bit of delay when using Events.AnimationEnd with states. I wanted to run another animation when a state animation was complete, but it seems to me that there's a bit of delay. Or is it just me? :)

I was trying to share a demo, but I get this error when uploading the work: https://up.kibakoapp.com/v72OVsKSnk

14 Comments

Balraj Chana

Hey Patrick, it depends on the type of curves you're using. Spring curves will make an animation appear delayed as it's bouncing around near the start and end of the curve. All other curves should appear instant even on AnimationEnd. Have a look at this file and uncomment line 7 to see the difference: http://share.framerjs.com/do46srkbwx25/

Jordan Robert Dobson

There is a fourth argument you can pass which is the end threshold I believe. Koen mentioned this to me a while back but never got a chance to use it.

If I recall correctly he mentioned a value of 0.5 or 0.05 was around the area he suggested. I'm not sure what the threshold is tied to exactly... But that may help with a spring.

Joshua Tucker

Jordan Robert Dobson Now what would be rad is if you could have a threshold for triggering AnimationEnd/StateDidEnd, versus controlling the entire curve. Using Utils.delay sometimes can be a bit dodgy for animation sequences.

Jordan Robert Dobson

Joshua - I think that's exactly what I am saying here. It just lets you set the end state.

Actually I see what you're saying. That would be super tricky to do...

Joshua Tucker

Jordan Robert Dobson Yeah it's tricky and confusing even in theory. But it's the idea that an object can still be in motion when it sends its "ready." One could figure out the specifics of the curve and adjust accordingly to make it feel and look right, but sometimes skewing the threshold variable animation curves to get the right timing jacks up the curve flow.

Jordan Robert Dobson

I was under the impression the threshold only dealt with when it reports being done not when it actually is done animating. So are you saying it actually causes it to stop. That's no Bueno. :(

Joshua Tucker

Jordan Robert Dobson Yes. It affects when the animation stops, not when it reports.

Jordan Robert Dobson

👎🏻

Patrick Arminio

Balraj thanks I'll check it out! :)
Jordan, Joshua what do you think about having a animation progress event? Shouldn't be that hard to do I think (I'll check the code when I get some free time)

Koen Bok

Yes, let me try to explain quickly.

Think about a spring in your head, and now pull it and let it go. When will it stop? If you think deeply about that, you'll likely conclude something like: once I can't observe it moving anymore (but it might still move tiny tiny amounts).

So by doing that you have defined stop (or the end) of a spring. Now think of that spring pulling a Framer layer, projected on a pixel screen. Framer tries to do the same and guess when you cannot observe the layer moving anymore before it throws the end event.

But that sometimes might feel off, because every layer has different visual properties (size, scale, etc.) and the human eye is very sensitive to motion.

Luckily there is a way to tweak these on a per animation basis. It's called tolerance. And it works like this: http://share.framerjs.com/edlkbf7qond0/

Let me know if you still have questions.

Patrick Arminio

that's great! thanks <3

Joshua Tucker

Patrick Arminio Totally! I'm overseas for a bit so I have limited internet but I'll definitely tackle this with you when I get some time! Unless Koen Bok can shed light on tolerance's future as an argument :).

Jordan Robert Dobson

I'll take a look at this today more as well.

Jordan Robert Dobson

I think this may help you get what you want. It's only really worked out for the example Koen provided... but could likely be applied to other properties as well. Check it out Joshua & Patrick.

http://jrdn.io/bpdT

The one major thing I would want to change here is to setup an event that gets called but I don't have enough time today before my double header soccer games.

Read the entire post on Facebook