Not starting at initial state

Design help Animations & Interactions
1

Hello!

When setting up a simple Mouse Clip (Tap) Trigger. The elements that are affected move/rotate on animation and all the previews look fine. But when I go into preview mode to test it or publish to staging site the initial load of the elements are already in their animated state. The first click does nothing (appears) which should trigger their animation (which they’re already at). The second click goes back to initial and will loop per click animation like it’s supposed to.

So the issue is when the page loads?

Here is my public share link: https://preview.webflow.com/preview/piedmontchapel?preview=7b3c673ee5498773e42d0c54fc00500a

2

Hi @hirastudio, thanks for the site link, that helps a lot, could you please take a screenshot of the affected elements in the interaction? It will help to zoom in to the correct interaction.

Thanks in advance.

3

Yes of course! Here’s the issue in action. When I go to preview mode the menu looks like this:

07 PM
07 PM1054×394 147 KB

I actually found a workaround. If I add to the page load the Close Menu interaction I made for closing the menu, it ‘closes’ when the page loads.

4

And this too if it helps:

04 PM
04 PM1032×614 53.2 KB

5

Hello,

I also have this same problem. Everything looks good in the animation editor, but once I click out to the page editor, the initial state is ignored.

Sometimes it stops working all together…

The sample page is at

http://gj-2.webflow.io/test

back-end:

https://preview.webflow.com/preview/gj-2?preview=d3f3bea566ce27677130343635d7362d

If anyone has an idea, please help

6

The way I’ve found to get around it is to load the closing animation on Page Load. That way it sets to initial.

7

Yes, I saw your solution and it works, but I prefer not to see the animation in reverse first.

This works if I start from scratch:

https://preview.webflow.com/preview/round-menu?preview=04d32abfb5cfdd026e0997c466d592df

http://round-menu.webflow.io