> For the complete documentation index, see [llms.txt](https://mpithemes.gitbook.io/unicorn-shopify-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://mpithemes.gitbook.io/unicorn-shopify-theme/theme-settings/animations.md).

# Animations

### Appearance

**Reveal sections on scroll**\
Activate the option to add a bottom-up content effect to reveal sections on every page. The floating content loading works when scrolling down the page just once after landing on the page.

<figure><img src="/files/lPHRxlhbR0XYu4xfd63n" alt=""><figcaption></figcaption></figure>

**Sticky footer**

{% hint style="warning" %}
**Note!** To trigger the feature, a few requirements should be completed:

* This option works with the inactive full-width logo functionality. To deactivate the Footer logo, go to the "Footer" section and hide or remove the "[<mark style="color:blue;">Full-width logo</mark>](/unicorn-shopify-theme/section-groups/footer/footer/full-width-logo.md)" block.
* The effect requires enough space on a page. If the Header content is too high or the browser window height is too small, the effect will be disabled automatically.
* The feature can be applied only to the desktop view.
  {% endhint %}

Select the desired option in the drop-down:

* **"Disabled"**. Deactivate the footer effect by selecting the option.
* **"Enable"**. Activates the sticky effect.
* **"Use with overlay"**. Adds a slight background color to the Footer. Control the color overlay transparency in *Theme settings → Colors → Other colors* by adjusting the "[<mark style="color:blue;">Overlay opacity</mark>](/unicorn-shopify-theme/theme-settings/colors.md#overlay-opacity)" percentage.

<mark style="color:orange;">**Note!**</mark> With the fixed footer effect, the footer content is fixed. When scrolling up, it is obscured by the section above it.

{% hint style="success" %}
The **Sticky footer effect** can be viewed on the [<mark style="color:blue;">DEMO</mark>](https://unicorn-theme-flex.mpthemes.net/).
{% endhint %}

### Hover animation

{% hint style="info" %}
The following settings are applied only to the desktop view.
{% endhint %}

**Use link underline animation**\
By activating the option, text with link redirections, such as banner headings, product titles, and article titles, will be underlined when you hover over them.\ <mark style="color:orange;">**Note!**</mark> The underline does not apply to menu items or call-to-action buttons that are formatted as links.

**Image**\
To add the hover animation to images in the Mega Menu, use the provided drop-down. Decide whether to apply the **"Zoom in"** or **"Zoom out"** animation. Optionally, disable the hover effect by selecting the **"None"** option.

<figure><img src="/files/ISraUoyZwuAvx6MPQDyL" alt=""><figcaption></figcaption></figure>

**Card image**\
The hover animation applies to product cards. Select one of the options in the drop-down: **"Zoom in"** or **"Zoom out"**. The **"None"** option disables the zooming effect.

**Product card buttons**\
Use this setting to customize the visual behavior of product card actions throughout your store. Controls how action buttons appear on product cards when customers interact with them.

* **"None"**. Buttons remain visible without any animation effect.
* **"Fade"**. Buttons smoothly fade into view.
* **"Fade up"**. Buttons fade in from the bottom of the product card, creating a more dynamic appearance.

<mark style="color:orange;">**Note!**</mark> The option applies to the "Add to cart", "Compare", and "Quick View" buttons displayed on hover over product cards.

{% hint style="success" %}
The "Fade up" setting can be viewed on the [<mark style="color:blue;">DEMO</mark>](https://unicorn-theme-sunny.mpthemes.net/collections/monokini). Hover over the product card to view the appearance effect.
{% endhint %}

**Banner image**\
Adds an animation inside the image container. Choose the suggested option from the list:

* **"None"**. Deactivates the animation.
* **"Zoom in"**. Enlarges the image on mouse hover over the banner.
* **"Zoom out"**. Decreases the image on mouse hover over the banner.
* &#x20;**"Zoom in, add overlay opacity"** / **"Zoom out, add overlay opacity"**. Add the overlay opacity and zooming effect to an image using the option.
* &#x20;**"Add overlay opacity"**. Enables opacity over the image.

Read more about the described options on the following [<mark style="color:blue;">help page</mark>](/unicorn-shopify-theme/dynamic-theme-sections.md#animation).

### Product page

**Add to cart button animation**\
Includes three types of "Add to cart" button animations that operate on Product pages and the "Featured product" section. The animation fires every two seconds without the mouse hovering over the button to attract the attention of visitors:

* **"None"**. The option deactivates the animation button effect.
* **"Light"**. This option adds the light effect animation. The animation effect extends beyond the button's boundaries.

{% hint style="success" %}
View the example on the [<mark style="color:blue;">DEMO</mark>](https://unicorn-theme-dark.mpthemes.net/products/radiance-pro-lamp-white).
{% endhint %}

* **"Wobble top"**. Select the option to add the shake effect to the top of the button and text. The bottom of the button will remain static.

{% hint style="success" %}
The effect example can be viewed on the [<mark style="color:blue;">DEMO</mark>](https://unicorn-theme-sunny.mpthemes.net/products/mermaid-cove-bikini-1).
{% endhint %}

* **"Buzz out"**. Use this option to add a rotation and shake animation with a fixed center axis to the button.

{% hint style="success" %}
Check the example on the [<mark style="color:blue;">DEMO</mark>](https://unicorn-theme-valuable.mpthemes.net/products/comfy-wing-chair).
{% endhint %}