Hello, I’m a Webflow newbie, so I hope I won’t ask too stupid questions!
Here’s my problem: I have made a website that has two animated characters. When you load the site there is an idle animation showing the characters working. On mouse hover/tap I want to play another animation where they wave hello to the viewer.
I have set an idle animation by creating a div with an animated gif as the background. I have set a hover state for the div that switches the idle animation to the wave animation when you move the cursor over the gif. The problem is that the wave animation cuts off as soon as you move the cursor away, so the transition looks very choppy. What I would like to have is that the wave animation finishes playing before you can activate it again. Is this possible to do at all? Should I do everything in a completely different way?
Here is my public share link: https://preview.webflow.com/preview/anna-karins-first-project-a2b450?utm_medium=preview_link&utm_source=designer&utm_content=anna-karins-first-project-a2b450&preview=f8fa1a19dafafcd3296e763f2036ede3&mode=preview