Button hover icon effect

Hi, I’m trying to recreate this hover effect of the grey button under the FAQ section:

Currently I can get the icon to swipe through but it won’t repeat, so when it happens once it won’t happen again. I’m using 2 arrows and hover trigger with the move action.

I can’t figure out where the flaw is… Read only link:
https://preview.webflow.com/preview/dance-co?utm_medium=preview_link&utm_source=designer&utm_content=dance-co&preview=0316e6d5dc9df2a93e6bb2abf52e768b&workflow=preview

Thanks!


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

Hey.

Copy your initial states at the end 0 duration. Like this:
Bildschirmfoto 2023-04-13 um 16.08.19

You need to make sure that after your animation, the elements go back to their initial position so that they can perform the same movement again.

You get the same result if you define the reset of the elements via the hover out trigger. Then you have two animations. In some cases it is better to have two animations, because they are more controllable and offer better performance even with large animations. But as described above you have only one animation and the result is the same.

Thanks for that! I tried that in fact but you see the arrows sliding back into place. How can I do this so that you don’t see them sliding back?

Hi.

When u can see the arrows sliding back, the duration of your slide-back part has to be 0. Then the arrows should jump back instantly.

If the problem still exists, please give me the updated public share link again. Then I can have a closer look at it.

1 Like

Amazing! I missed the 0 duration part. Now it’s working :slight_smile:
Big thanks!

1 Like