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

What is Framer? Join the Community
Return to index
Christian Johansson
Posted Jan 26 - Read on Facebook

Hey, I want to have different animation curves for in and out animations during a state change. I see that I can set

layer.states.animationOptions but that will give me the same animation for in and out animations. Any nifty way of dealing with this and still using state changes? I guess it can be done by triggering different predefined animations and not using state changes?


Joshua Tucker

You can change the animationOptions prior to calling the state. I use variables for curves as well so I can easily change it. Example (made the numbers up but the principle is the same):

default = "spring(200, 30, 10)"
curve1 = "spring(30, 20, 10)"
curve2 = "spring(200, 0, 0)"

# You add the states for your layer and then for animationOptions.curve you set whichever one you want to start out with (let's say "default").

layer.states.animationOptions = {
curve: default

# Your "in" state change...

layer.states.animationOptions.curve = curve1
layer.states.animationOptions.curve = default

# Maybe your "out" change...

layer.states.animationOptions.curve = curve2
layer.states.animationOptions = default

Andy Jakubowski

You can also use the Event.StateWillSwitch listener and then update the options:

layer = new Layer

secondState: {x: 100}

layer.on Events.Click, ->

layer.on Events.StateWillSwitch, (currentState, newState) ->
switch newState
when "default"
layer.states.animationOptions = {
time: 0.5
when "secondState"
layer.states.animationOptions = {
time: 0.1

George Kedenburg III

And for a third way, you can pass them in on state change i.e. layer.states.switch('stateName', animationProperties)

Christian Johansson

Thanks, that was 3 great suggestions :)

Read the entire post on Facebook