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

What is Framer? Join the Community
Return to index
Ricardo Vazquez
Posted Sep 02 - Read on Facebook

My hunch is the answer is no based on reading the docs, but can you set layer.states.animationOptions to each individual state? I want different curves for each state.

13 Comments

Joshua Tucker

Great question Ricardo! You can set the curve on each state call.

layer.states.switch "newState", curve: "spring(300, 35, 0)"

OR you can pass in a variable that has a curve

testCurve = "spring(300, 35, 0)"

layer.states.switch "newState", curve: testCurve

Balraj Chana

Here's a shorthand version:

layer.states.switch "one", curve: "spring(100,10,0)"

Ricardo Vazquez

Boom! Beautiful! Thanks so much :)

Joshua Tucker

Anytime Ricardo, cheers Balraj Chana!

Koen Bok

Benjamin can we add this?

Jordan Robert Dobson

Benjamin Den Boer - Quit slacking and add this in there... It's been brought up so often! :D

Joshua Tucker

Benjamin Den Boer (Anonymous member from the crowd) Yeah, what that guy said! :P.

Benjamin Den Boer

Hahah okay okay Jordan & Joshua - adding this now! ;)
http://framerjs.com/docs/#layer.states.animationOptions

Jorn van Dijk

Ben wakes up. Ben fixes Framer. Ben goes to sleep.

Jordan Robert Dobson

Ben is awesome. End of story.

Steve Gale

Is it possible with states.next to set different animation options for each state?

I would like to add a 1 second delay when changing to state A but no delay to state B.

Something like the below:

layer.states.next("stateA” delay: 1, "stateB” delay: 0)

Benjamin Den Boer

Steve Gale - animationOptions can't be passed within the layer.states.next() method yet. You can always use conditional statements within the event that contains the .next() method, though:

if layerA.states.current is "stateA"
____layerA.states.animationOptions = delay: 1

Steve Gale

That'll do me just fine! Thanks, Ben.

Read the entire post on Facebook