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

What is Framer? Join the Community
Return to index
Jinglu Liu
Posted Aug 26 - Read on Facebook

Hi, I've been puzzled by a question for a long time. One layer which have 3 or more different states, without any operations (like click, touch), how could it move to the next state animation when the previous animation ended?

8 Comments

Reshad Farid

Run a timer in the background?

Andreas Wahlström

Hi! Try using Events, like this: Layer.on Events.AnimationEnd, -> @states.next()

Jinglu Liu

Andreas Wahlström this works if there are just 2 states, but not for 3 or more states as the AnimationEnd event cannot be used repeatedly on one layer.

Stefan Hvlmnns

Listen to AnimationStart and run the next state on Animation end, kinda like a rescursive function

John Anthony Evans

If you are using states use the StateDidChange event listener.

Jinglu Liu

John Anthony Evans could you give me a simple example? I've never use this before, thx!

Joshua Tucker

Jinglu Liu Hey Jinglu! I created a simple example to show you how you could do animation chaining: http://share.framerjs.com/usuil0iw4tdc/

As a sidenote: for spring animations, the tolerance value i.e.

– curve: "spring(tension, friction, velocity, tolerance)" –

controls when the animation is considered finished. If you are playing with animations that have less friction, it may be considered "not-finished" for a while. So you can tweak the tolerance value a bit and you'll see the effect. Of course, adding friction helps too. The default for tolerance I believe is .001.

Jinglu Liu

Joshua Tucker thanks a lot!!

Read the entire post on Facebook