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

What is Framer? Join the Community
Return to index
Metin Saray
Posted Nov 20 - Read on Facebook

Hey guys,

Is there a way to listen a specific state to call "on animationEnd"?

e.g animationEnd(stateA) or such..

Thanks in advance,
M.

8 Comments

Raphael D'Amico

# Welcome to Framer

# Learn how to prototype: http://framerjs.com/learn
# Drop an image on the device, or import a design from Sketch or Photoshop

iconLayer = new Layer width:256, height:256, image:"images/framer-icon.png"
iconLayer.center()

# Define a set of states with names (the original state is 'default')
iconLayer.states.add
second: {y:100, scale:0.6, rotationZ:100}
third: {y:300, scale:1.3, blur:4}
fourth: {y:200, scale:0.9, blur:2, rotationZ:200}

# Set the default animation options
iconLayer.states.animationOptions =
curve: "spring(500,12,0)"

# On a click, go to the next state
iconLayer.on Events.Click, ->
iconLayer.states.next()

iconLayer.on Events.StateDidSwitch, (previousState, newState) ->
# Without this if statement, the StateDidSwitch event triggers twice,
# once when you start the animation and then again at the end
return if previousState == newState

# Print the previous & current state
print previousState + '-> ' + newState

# Keep looping through the states
iconLayer.states.next()

# Do something if it's in a specific state
if newState is 'third'
print "Yay! It's the third state"

Raphael D'Amico

Try pasting this into Framer js

Raphael D'Amico

When you click it will begin to loop through the different states, and will print on the third state. Just keep adding if statements like that one to take specific actions when a new state is reached.

Raphael D'Amico

Koen Bok It looks like there's a bug where the Events.StateDidSwitch event listener triggers twice, once at the beginning of the state animation and once at the end, which screws up events based on a state animation ending.

You can see the bug if you take the code above and remove the "return if previousState == newState". The call stack will immediately blow up.

Looks like the first, incorrect, trigger is happening before the correct last state and new state have been computed (maybe something to do with the "instant" parameter?)

Koen Bok

Thanks, I'll look into this!

Raphael D'Amico

No probs :)

Metin Saray

Great help Raphael D'Amico i'll try this and let you know!

Raphael D'Amico

Hit me up if you have any more questions! :)

Read the entire post on Facebook