Activate Gif Animation on Hover

Design help Animations & Interactions
1

Webflow,

I’ve been trying to find a way to do a specific interaction and I can’t seem to find any instance of it in your tutorials. I would love to have a design aspect similar to this site’s nav logo hover.

I would like to activate a gif animation on hovering the png logo image in the top nav. Is this possible?

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

2

Hi Melanie,

This is very easy to do. Follow the steps below;

  1. Select the logo image > go to interactions > create new > ignore initial appearance > click on triggers
  2. Click the + icon in hover over > click the + icon in transforms > navigate to rotate
  3. In the 3rd slider, drag it to 100 degrees or whatever you like > click done.
  4. Click the + icon in hover out > add a new transform > click on rotate (keep all slides at 0 degrees) > Click done.

Hope this helps.

3

Hi nwdsha,

The interaction I would like to do isn’t necessarily a rotate. Below is the before and after hover I would love to achieve.

Natural state - http://d.pr/i/gdEO
On hover - http://d.pr/i/ugTv

4

Hi @Melanie,

I understand.

What you can do is show the animated image on hover of the parent image.

Allow me some time to test out a few ways and I’ll get back to you with a definitive answer.

Best,
Naweed

naweedshams.com

5

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.