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

What is Framer? Join the Community
Return to index
Dennis Zhao
Posted Aug 05 - Read on Facebook

Hello! I've been playing around with Framer Studio recently to prototype an iOS app. I'm having some difficulty animating through multiple states but only using one transition. I want an intermediate state between the first and the last but for the transition between to be governed by one timing function. I can listen for the state change but by doing so transitioning to the next state becomes its own animation. Is there any way we can specify intermediate frames, like with CSS @keyframes?

10 Comments

Ed Chao

you can add multiple animation states to a single object and then use a utils.delay to specify the time between each state.

Dennis Zhao

Hi Ed, thank you but I don't think I explained my problem correctly. I understand I can add multiple animation states to a single object but each animation between any two states uses one timing curve to specify how the animation should occur. Is there any way I can add keyframes with Framer JS so I can control what happens in between the animation while it's still being controlled by one timing function? I can just add/remove CSS classes and use CSS keyframes but was wondering if Framer could do this somehow

Dennis Zhao

Never mind sorry I was confused it looks like you can'd do this with CSS keyframes either. (just tried here http://codepen.io/anon/pen/ezfJd) and it looks like each transition from one state to another (eg 0 -> 30, 30 -> 100) uses its own timing. How would I do something like state 1: red, state 2: green, state 3: blue, but have the entire transition from state 1 to state 3 be on a curve and just be able to specify when within the transition from state 1 to state 3 state 2 should occur? Can't tell if this is a silly question or if I just don't know what I'm doing or both haha

Ed Chao

Hm, if what you're asking is if one animationOption can apply to all the states "together", then I'm not sure (since default behavior has the animation Option apply to each state change as it happens). That said you may be able to fake it by editing each state transitions animationOption. Here is an example of how to do that: https://gist.github.com/elliottkember/d714f2bfc8fde24c5406

Dennis Zhao

Yup at this point I just change the animationOption after transitioning to the first state in a way that the entire animation is transitioned similar to how it would be if it were governed by one timing. Doesn't look too great when it's slowed down but luckily it's a relatively short animation :) thanks for the help!

Marc Krenn
Dennis Zhao

Hi Marc, kind of – ideally I want to be able to define multiple states (let's say a, b, and c) and have one transition from a -> b -> c, but to have the entire transition from a -> b -> c be calculated with one timing curve. This is simple with a linearly animated transition, but with any other curve I'm having difficulty figuring out how to actually do it

Dennis Zhao

Here's a pic that'll hopefully clear it up

Marc Krenn

Okay Dennis, I get it know.

Well, that's a though one, especially since Framer doesn't support native curve-interpolation of colors (as a property), yet. My gut tells me, this is doable with some dirty hacks right now but I'm afraid I won't be much of of an help here.

Maybe some of our pros (Koen, Tisho, Cemre,...) can help you out?

Dennis Zhao

Marc Ah ok thanks for the help anyways!

Read the entire post on Facebook