Streaming live at 10am (PST)

Help with interactive GIF animations

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

Hello @Akbergkvist,

Wellcome to the community! you did a great job on your site. I see the problem that you have, you want the hover animation to be completed before it changes to the none state animation, right? So I think that the way you did it, just by using the states, does not give you the option of displaying the full animation between transitions. However, you can do it with animations, on animations you can set a delay on each action that will allow for each animation to be complete between transitions.

1 Like

Sorry I mean to say Interactions not animations. You can do it with Interactions!!

Ah, thanks for the feedback! So what would be the best way to set up the interaction? Make two animated gifs on top of each other and animate them to hide/show on hover?

I think the suggested idea is to rebuild the animations from scratch in webflow. It can be either pretty simple or pretty hard depending on your skills creating animations in webflow.

@Akbergkvist yes you got it. Once you start the interaction you will see that is very intuitive, don’t be afraid to fail that is how you learn to use the timed animations on interactions. Use hide/show on hover but put a delay on both divs that are just a little bit longer than the duration. Please let me know how it goes.

1 Like

Hmm, I have trouble getting the timing right. Both gifs are continuously looping, I don’t know if there’s a way to set the wave gif to start from the beginning on mouse over.

@Akbergkvist did you make two div blocks containing the respective animations? You might have to copy your original animation inside a container and make another one with the waving animation and with interactions hide/show both animations on hover.

@Pablo_Cortes yes I made two divs, the problem is that the wave gif was looping so it could be in any state on mouseover so the transition did not look very good. The solution turned out to be that I had to replace the looping wave gif with one that only played once and then add javascript to make it start from the beginning on hover (I had to get my developer partner to help me with this.) Then I added the interaction just like you said with hide/show and delay to switch between the idle gif and the wave gif, so now it it works! Here’s what the animation looks like now: https://anna-karins-first-project-a2b450.webflow.io/home-test (the left one is made in the new way, the right one is the old interaction)

3 Likes

Awesome job @Akbergkvist!! I’m glad it worked out for you. Take care and good luck with your website.

1 Like

Using photoshop, you can save gifs to play continuously or only once. You could try having that.

As for your question about gifs and image hovers, take a look at my site and you’ll see some examples of that process. The “meet the team” section has static images, which on hover are set to hide and instantly reveal the gifs.

Website: www.tritiummarketing.com

1 Like

Hello! If you see this do you mind sharing what Javascript you added to make your gif play from the beginning on each hover? Struggling with exactly the same issue 2 years later. No coding experience.