Menu animation problem returning to initial state

Design help Animations & Interactions
1

I have a feeling I may be missing something exceptionally obvious, but I’m a bit confused by animations.

So I’m designing a basic menu icon, that rotates upon being clicked, and then returns to normal on a second click.

What I don’t understand, is with the second click animation that returns it to its original state. If I have the initial state of the second animation with no value for rotation, and the final state to be 0 - it works (even though there is an error message asking for an initial value).

However, if I set the second click animation to start at 180 degrees (this is the rotation from the first click) it doesn’t work correctly.

Is there an easier way to ‘return to origin’ with these kind of animations.

Here is my public share link:
https://preview.webflow.com/preview/new-idea?preview=d3ceca9591a8f7cd1cb6899b0d6f3f64

2

Hello @SamDaman

Are you still experiencing this? I just accessed your site and it works perfectly.

3

Hi, yes this is with the second click animation initial state with no values entered and seems to work.

I’m just not sure why it works only when I have no value entered for the initial state on the second click animation, and if I enter the value 180 for the initial state on the second click animation (this is what angle it is rotated after the first click), then the animation doesn’t work.

Not sure if that makes sense to you guys? Hard to explain textually

4

This is what I get when I click:

http://cloud.ipagroup.co/qwr4