Hover Interaction Question

Is there a tutorial to making this type of Hover interaction in Webflow? (it is on the Webflow site)


I didn’t see the tutorial about this interaction anywhere.
But if you will look into the code behind it, you will see that there is 1 interaction with many hover triggers inside, which affect different elements:

-the center block behind the logo is rotating (looped),
-the little shapes are moving away from the center block and become transparent (looped),
-the logo itself is scaling down and up (looped)

Hope it helps.


Try this;

  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.