Animation begins at the end position in preview only

Hello everyone,

I am new to webflow and I am trying to build a simple menu animation. It seems to be working, only AFTER clicking on the menu icon twice. Seems like the animation works well with the animation plays (in the animation designer). I am having trouble figuring out 1. why the animation is shown at its final position when you load up the preview, and 2. why the animation doesn’t work until after it is clicked on twice.

Any help is greatly appreciated! (Or feedback on anything else too haha)

https://preview.webflow.com/preview/emma-rose?utm_medium=preview_link&utm_source=designer&utm_content=emma-rose&preview=0b6168dcb252298de0aa26e93ccc589b&mode=preview


Here is my public share link: LINK
(how to access public share link)

[RESOLVED]
The issue was that I was setting ‘initial state’ as true in the beggining of both the open and close animation of the icon. So, Webflow was giving preference to the second initial state so it was always starting there. Hope this helps someone!

It did help me! 1 1/2 years after your post, but yes I was stuck on that same issue. Thanks!