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

What is Framer? Join the Community
Return to index
Terry Tien
Posted Jul 17 - Read on Facebook

Hi guys.
Is it possible if I want to trigger a state switching after an animation end like this?

timerBackground.states.add
________red:
____________backgroundColor: "rgb(247,73,55)"
________green:
____________backgroundColor: "rgb(46,194,172)"
timerBackground.onTap ->
____this.states.switch("red")
timerBackground.states.animationOptions =
____time: 2
timerBackground.onAnimationEnd ->
____this.onTap ->
________this.states.switchInstant("green")

If not, how can I reset the layer to where it started?

Thanks you in advance!

2 Comments

Paul Justin Farino

Hi Terry,
There are a few ways to achieve this. I hacked together an example here of tapping on a layer, animating that layer, listening to animationEnd, transitioning the state and then transitioning back to the original state: http://share.framerjs.com/zu3seluecatw/

There's some discussion around the different ways to animate within Framer (https://www.facebook.com/groups/framerjs/permalink/887388454721560/)

Depending on the context I may use animation.reverse() instead to reset the layer (http://framerjs.com/docs/#animation.reverse)

You can even create an additional state and store the properties timerBackground.props = yourVariable

Terry Tien

Thank you so much Paul. Will have a try tomorrow!

Read the entire post on Facebook