All Collections
FAQs for Design
How To Create Hover Effects In Sketch
How To Create Hover Effects In Sketch

Enhance your site with interactive, eye-catching hover effects using Anima

Or avatar
Written by Or
Updated over a week ago

Hover Effect ย 

A Hover Effect happens when the visitor hovers their mouse over a specific element and the element responds with transition effects. In this guide, we will show you how to create beautiful and eye-catching hover effects by using the Anima plugin within Sketch!

How to create a Hover Effect (Sketch):

  1. Select the layer(s) you want to add the effect to

  2. In Prototype, expand the Smart Layers section, and choose 'Hover effects'. Then select the desired effect, or enter your own CSS transition

    1. Hover effects include 'change color', 'grow', 'shadow', 'rotate' and more ๐Ÿš€!

  3. You can hover over the preview to see how it will look ๐Ÿ‘Œ๐Ÿผ

  4. Click Save

See it in action!

โ€‹โ—๏ธPlease note:

  • Due to the shift towards Figma in the UX/UI market, we have decided to remove official support for our Sketch plugin. However, users can still use the plugin as-is. We recommend using Anima with previous Sketch versions.

Get involved in our Anima Community Forum!

New to Anima?

Learn More

Did this answer your question?