Create a Website

How Do I Set Up Icon Animation Effects?

You can enable animation effects for the Icon widget in its settings. To select an effect, click on the widget and then on the “droplet” icon in the settings above it. In the window that will open, select Hover effects.

The available effects are:

  • Opacity
  • Zoom
  • Rotation
  • Brightness

Activating any of the animation effects brings up the “gear” icon which allows you to set up the icon animation by default and on hover:

  • By default — configures the way an icon displays once it’s loaded on a website
  • On hover — configures the animation effect that starts when the icon is moused over

The animation behavior can also be customized under Animation settings. In this section, you can set up speed and delay in seconds as well as select the type of easing:

  • linear
  • quick start
  • slow start
  • slow end

Was this article helpful?
8 people found this article helpful.