Anima

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!

<b>How to create a Hover Effect (Sketch):</b>

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

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 🚀!

You can hover over the preview to see how it will look 👌🏼

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

Preview Live Website: <a href="https://quiet-band-0580.animaapp.io/indi-desktop-1440?r=1&amp;p=iku9Vaz&amp;h=indi-desktop-1440&amp;pages=WyJpbmRpLXRhYmxldC03NjgiLCJpbmRpLWRlc2t0b3AtMTQ0MCIsImluZGktbW9iaWxlLTM3NSJd" rel="nofollow noopener noreferrer" target="_blank">[Open]</a> 

- Preview Live Website: <a href="https://quiet-band-0580.animaapp.io/indi-desktop-1440?r=1&amp;p=iku9Vaz&amp;h=indi-desktop-1440&amp;pages=WyJpbmRpLXRhYmxldC03NjgiLCJpbmRpLWRlc2t0b3AtMTQ0MCIsImluZGktbW9iaWxlLTM3NSJd" rel="nofollow noopener noreferrer" target="_blank">[Open]</a> 
   

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.

- 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 <a href="https://forum.animaapp.com/" rel="nofollow noopener noreferrer" target="_blank">Anima Community Forum</a>!

<a href="https://projects.animaapp.com/signup" rel="nofollow noopener noreferrer" target="_blank">Create an account for free!</a>

Learn more about using Anima with <a href="https://www.animaapp.com/figma" rel="nofollow noopener noreferrer" target="_blank">Figma</a>, <a href="https://www.animaapp.com/xd" rel="nofollow noopener noreferrer" target="_blank">XD</a> and <a href="https://www.animaapp.com/sketch" rel="nofollow noopener noreferrer" target="_blank">Sketch</a>

<a href="https://support.animaapp.com/en/articles/2350134-how-to-download-the-anima-plugin-for-sketch-adobe-xd-or-figma">How to Download the Anima Plugin</a>

- <a href="https://projects.animaapp.com/signup" rel="nofollow noopener noreferrer" target="_blank">Create an account for free!</a>
- Learn more about using Anima with <a href="https://www.animaapp.com/figma" rel="nofollow noopener noreferrer" target="_blank">Figma</a>, <a href="https://www.animaapp.com/xd" rel="nofollow noopener noreferrer" target="_blank">XD</a> and <a href="https://www.animaapp.com/sketch" rel="nofollow noopener noreferrer" target="_blank">Sketch</a>
- <a href="https://support.animaapp.com/en/articles/2350134-how-to-download-the-anima-plugin-for-sketch-adobe-xd-or-figma">How to Download the Anima Plugin</a>

<a href="https://app.intercom.com/a/apps/id43h9l8/articles/articles/2621449/show" rel="nofollow noopener noreferrer" target="_blank">Add Forms and Real Text Inputs to Designs</a>

<a href="https://support.animaapp.com/designer-s-guide-to-anima/how-to-publish-a-website-and-host-it-with-anima">How to Publish a Website and Host it With Anima</a>

- <a href="https://app.intercom.com/a/apps/id43h9l8/articles/articles/2621449/show" rel="nofollow noopener noreferrer" target="_blank">Add Forms and Real Text Inputs to Designs</a>
- <a href="https://support.animaapp.com/designer-s-guide-to-anima/how-to-publish-a-website-and-host-it-with-anima">How to Publish a Website and Host it With Anima</a>

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

How To Create Hover Effects In Sketch

Sign in to Anima

Submit Bug Report

Back to Anima

Log in to Anima

Find answers and get help from Intercom Support and Community Experts

Link, Press control-option-right-arrow to exit

Empty Help Center

Uh oh. That page doesn’t exist.

Disappointed

Neutral

Smiley

Thinking...

Searching through sources...

Analyzing...

Tickets submitted through the messenger or by a support agent in your conversation will appear here.

How To Create Hover Effects In Sketch

Hover Effect

Get involved in our Anima Community Forum!

New to Anima?

Learn More