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

# Animations

Two kinds of motion live here. Both start off, and each is switched on its own — turning one on says nothing about the other.

| Feature                                     | What it does                                                   |
| ------------------------------------------- | -------------------------------------------------------------- |
| [Image zoom on hover](#image-zoom-on-hover) | A linked image grows a little under the cursor.                |
| [Block animations](#block-animations)       | Blocks arrive with an entrance effect as the page is scrolled. |

***

## Image zoom on hover

An image that links somewhere scales up a little while the cursor rests on it, hinting that it can be clicked. It applies anywhere an image acts as a link — product cards, collection cards, blog cards, mega-menu banners, and so on.

**Enable image zoom on hover** turns the effect on and off. It applies to the whole storefront — there is no per-block control.

![Image zoom on hover — a linked image grows slightly under the cursor](/files/nme65fXwpGulQncBx1XX)

***

## Block animations

A block fades, slides, or grows into place the first time it scrolls into view, and stays put from then on. Each block picks its own effect and timing through the **Animation** setting it carries — headings, text, images, buttons, and so on.

**Enable block animations** turns the effect on and off. It applies to the whole storefront, but a block still plays nothing until its own **Animation → Type** is set.

![Animations setting panel](/files/Sebokrm2IhraJ6dpiyB0)

### Type

Set on the block itself, under **Animation → Type**.

| Type              | What happens                                                                 |
| ----------------- | ---------------------------------------------------------------------------- |
| None              | No animation; the block appears immediately.                                 |
| Fade              | Fades in from transparent.                                                   |
| Scale             | Grows from half size while fading in.                                        |
| Slide from left   | Slides in from the left while fading in.                                     |
| Slide from right  | Slides in from the right while fading in.                                    |
| Slide from bottom | Rises from below while fading in.                                            |
| Rotate words      | *(Heading only)* Cycles through the heading's words in place, one at a time. |

### Delay

Milliseconds to wait before the block starts animating. Set increasing delays on successive blocks to stagger their entrances.

![Block animation in action — blocks fade and slide up as the page is scrolled](/files/pYrzVx6WQLPFjMMlHu0g)

### Blocks that can animate

These blocks expose an **Animation** setting:

* [Heading](/helix/theme-blocks/basic/heading.md)
* [Subheading](/helix/theme-blocks/basic/subheading.md)
* [Text](/helix/theme-blocks/basic/text.md)
* [Collapsible text](/helix/theme-blocks/basic/collapsible-text.md)
* [Image](/helix/theme-blocks/basic/image.md)
* [Video](/helix/theme-blocks/basic/video.md)
* [Icon](/helix/theme-blocks/basic/icon.md)
* [Button](/helix/theme-blocks/basic/button.md)
* [Buttons](/helix/theme-blocks/basic/buttons.md)
* [Countdown timer](/helix/theme-blocks/basic/countdown-timer.md)
* [Contact form](/helix/theme-blocks/forms/contact-form.md)
* [Email signup](/helix/theme-blocks/forms/email-signup.md)
* [Product finder](/helix/theme-blocks/product/product-finder.md)

The built-in headings that sections and blocks bring with them carry the same **Animation** group — the heading of [Recommended products](/helix/product-page-sections/recommended-products.md), [Recently viewed](/helix/global-sections/products/recently-viewed.md) and its [page version](/helix/other-sections/recently-viewed-page.md), [Related posts](/helix/other-sections/related-posts.md), the [Collection list page](/helix/collection-page-sections/collection-list-page.md), the [Video reviews](/helix/product-page-sections/product-information/product-details.md#video-reviews) block, and the recommendation row in the [Cart drawer](/helix/overlay-group/cart-drawer.md).

***

{% hint style="info" %}
**Accessibility is built in.** Helix respects the operating system's "Reduce Motion" preference. Customers who enable it will not see animations, regardless of what is configured here.
{% endhint %}