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
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/
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.
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.
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...
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.
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. :(
Jordan Robert Dobson Yes. It affects when the animation stops, not when it reports.
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)
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.
that's great! thanks <3
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 :).
I'll take a look at this today more as well.
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.
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.