Issues previewing animations


I’ve been setting up a bunch of interactions and animations and have noticed there are issues when previewing. I’m unsure about whether it’s an issue just with preview or if the animations themselves are the problem. The site is not yet published; I’m hoping to resolve a few remaining issues like this before making it live.

Here are some of the problems I’m having:

  • If I preview starting on the homepage, the thumbnail animations I’ve set up look great. But when I navigate to another page, and then return to the homepage, none of the animations show up. This is true for any animation, actually; if I preview it while on the page for the most part they work, but as soon as I navigate away from that page and come back to it, nothing moves.

  • If you go to any of the project pages and navigate to the bottom, I have hover effects set for the pagination arrows. The arrows are meant to jump out in their respective directions and spin on hover, then slide back into place on hoverout. On the left arrows, the first time I hover the animation works, but after it plays once, the arrow doesn’t spin, it only jumps out and slides back again. And on the right arrows, the first time I hover it doesn’t jump out, it only spins, but on subsequent hovers it jumps out but doesn’t spin.

Any help would be most appreciated, thank you!

Here is my site Read-Only:

1 Like

You’ll need to publish this and test on a live view, because the javascript has loaded once and these animations have been activated and loaded once.

They’re not meant to reload on a “page change”, only a browser refresh. Animations are based on the browser not the designer preview.

Try a live preview and reload pages, refresh, it should act accordingly, if not members can help inspect if there’s an issue.

Ok understood, thanks very much for clarifying @garymichael1313! I’ll make it live this weekend after I fix a few more things and will continue this thread if necessary.

Sure thing, see ya later.

Ok, I have finally published! And all animations are working properly.

The spinning arrows was an issue with some of my keyframes, in case others have the same issue. The problem was that the rotation would not occur on second hover. The reason was because I set my rotation on hover to 360, but didn’t set any rotation on hoverout, so it thinks that the arrow is already at 360, even though technically it’s visually the same as 0.

So to fix this, I added a rotation of z=0 with a duration of 0 in the hoverout and voila.

Thanks again @garymichael1313! I appreciate your help.

Yep, that makes sense. That’s one great thing about Webflow, if you sit there long enough there’s usually a way to work it out. I’m glad you got it done.

Have fun. See ya :grin: