Wipe Animation Jumps on 2nd Animation

Hi Community,

I am having a weird issue with my page wipe animation. https://slash-slash.webflow.io/

When you hover “the story” link, it changes the page to a dark mode and then goes back to a light mode when you hover “the apparel.” However, the second time you try to change back to dark mode by hovering “the story” the animation is not smooth and jumps through. It is a very jarring transition and I’m not sure what is causing it.

Any help would be appreciated!

Nick


Here is my public share link: https://preview.webflow.com/preview/slash-slash?utm_medium=preview_link&utm_source=designer&utm_content=slash-slash&preview=8ac6cad64defaa0e3f5203bc9c462b43&pageId=5f3455b8cd08c25347cf74bc&mode=preview

Hi Nick,
I think that your problem is inconsistent with numeric values.
One if the hover interactions is setting 100vw while the other sets 0px. Change both to vw.

Thanks for the reply!
That actually fixed the weird animation jump on the second animation and beyond, but it introduced a new oddity where only the first animation has a jump.

I fixed this one by setting an initial state in the animation which I didn’t have previously.

Thanks for the help!

1 Like