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 😊
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...!
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(...)