Rotate on hover, reset rotation at end of animation?

Design help Animations & Interactions
1

Hi forum,

This is my first post here, love Webflow and it’s pretty much self-explanatory but unfortunately not everything. This issue is purely on the animation of the menu button, not the menu itself. So here is my issue:

In the top right corner I’ve got my menu button, when you press it will rotate clockwise and change color from ‘grey BG, yellow arrow’ to a ‘yellow BG, grey arrow’. When you “close” (click again) the menu will rotate once more clockwise and do the color switch back to it’s origin. So this works as intended, now when you open the menu again it will rotate counter-clockwise instead of clockwise so it looks looped. I think this is because of the rotation value it is set on after the 2nd click, but I need to know how to reset that value to z-axis = 0 degrees?

If I try a 0 degrees rotation at the end of the animation it does nothing (unfortunately). If I set the initial state to 0 degrees it does nothing as well…

Hope someone can help?!
If there are any questions, please post them here and I’ll try to answer them a quickly as possible :smiley:

Thanks in advance for those who take the time to look at this.

Here is my public share link: LINK

[2] If the animation doesn’t work, try the published link: www.notsosquare.eu (refresh to rewatch…)
[3]: Share a read-only link | Webflow University

2

Hi @NotSoSquare
Welcome to the forum!

You can add the reset state of both classes together with the final event (“hide/show”), just make sure you set the duration on zero.

Check screenshots, after doing this, it worked perfectly.

Menu open arrow:

55
55684×1576 76.5 KB

Menu closed arrow:

01
01688×1578 77.3 KB

1 Like
3

Thank you very much Reinier!

This was indeed the solution, although I had to figure out what you meant with the screenshots the text was clear.

Edit: I didn’t know you could press the images to enlarge them, that’s why I didn’t get the images (lol)

1 Like