Figma Support Forum

Making animations go when hovering


I am trying to prototype animations. It is the first page that you will see on the website. I want the animations to be still when you first see them so they would be just the illustrations but when you hover over the illustration it will move. The movements are only around 3-4 seconds long. All of them are placed within Figma as a GIF. I have looked up countless tutorials and have not figured it out. Also there are 6 animations on the page. they are in a line from left to right and I want that they only play when hovering. I do not want them to play at the same time. The only animation that plays is the one that your mouse is hovering over. If you know how to do this please help. Thank you.

Hi Riley!

This is definitely possible, as far as I know, but it is a lot of work to build.

You’ll need to use the proto feature to navigate different screens. Possibly, you could use the protopie plugin found in the community?

Cheers and welcome!

Super easy. Use Overlays to do that: open the overlay on mouse enter, then close overlay after delay. The delay is the length of your animation.