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

What is Framer? Join the Community
Return to index
Cordova Putra Handri Ansyah
Posted Dec 18 - Read on Facebook

Good evening from Indonesia.

Another beginners tutorial in start using and experimenting amazing stuffs with Framer have released which now focusing on writing more code and examine Framer animation logics.

Hope this'll help the community to grow better.

Link : https://youtu.be/rmqa9w6QWcU

PS : Let me know if I missed something along the way 😊

2 Comments

Lukas Guschlbauer

Okay, I have to say I didn’t watch the whole thing, but scrubbed through, but I think you got something wrong about states:

At around 4 minutes you define a state and put an Animation inside, which is not how states are supposed to be used!

With states you just change prop-values to represent how the layer should look when it has finished transitioning to the other state, not the animation itself.

So you would define a new state like:

layer.states.newState =
size: 200
x: 300
animationOptions:
curve: ...
time: ...

and then when you want to animate to those props you can call layer.stateCycle() to go to the next state in states or to a specific one by calling layer.animate „newState“.

That’s also why your animation fires directly before the button-click.
If you do it the way I described above you don‘t have to define the state inside of the click event!

As I said I only watched until minute 5 or so but I couldn’t watch where this was going...!

Jordan Robert Dobson

What you are passing to the first state is the animation object because it gets evaluated immediately and returns an Animation Object when you call box.animate(...)

Read the entire post on Facebook