Animation won't play twice before it's finished the first time

Design help Animations & Interactions
1

I have an interaction that is set to move 15px to the right (linear) and ease (in out sine) back 15px to the left.

The trouble I am faced with is that when I hover over the animation, away from it and then back to the element before it’s done the element instead of being 15px right of the no hover position it will hard cut in the middle of it’s movement (i.e jiggle) and stay on 0px (original state) until you move the mouse away.

What happens after that point is the 2nd animation then plays, the jiggle once more. I can keep interrupting the 2nd animation and it will repeat for days on end. Each time it will be bought back to the original state and repeatedly the last animation once I hover away from it.

Any help would be greatly appreciated!

Here is my public share link: https://preview.webflow.com/preview/signspublishing?utm_source=signspublishing&preview=bf8520abff71714f12803d4395ac493a

2

So your animation starts with some default values, run, then in the end restore the default values for the next time the animation plays. Right?

Now if you want to be able to run the anim again before it finishes, you probably have to design your IX differently: the IX needs to re-set the default values at the beginning. Like in 0ms, so it’ making sure that when triggered, all the expected values are there.

Makes sense?

3

I’m not sure I understand. I know what you’re saying just not how to execute it.

Do I need to change my hover over or out animation sequence?

… and what exactly do I need to do?