Add animations to a website

Guides

Decide whether motion helps

Use motion to clarify an interaction or draw attention to a small amount of content. This guide adds a reveal effect to an approved custom body without changing the site's native navigation or footer. There is no verified universal animation switch for every managed block.

Custom design uses reviewed HTML, scoped CSS, and supported behavior modules. Its body is not visually editable native content. If ongoing visual editing is essential, keep the page managed and avoid converting it solely for decoration.

Before changing the page

Select the exact website, page ID, and language. Save approved copy first and identify a recoverable revision. Review the current custom source, if any, rather than rebuilding from the rendered browser DOM. Confirm that the active CMS and engine support the intended behavior. Source availability alone does not establish deployment support.

If an assistant will make the change, grant read access for inspection first. Approve a page-local proposal before enabling writes. Ask it to preserve all copy, links, fonts, media, header identity, and unrelated settings.

Add one reviewed effect

1. Open Custom design for the selected page. Choose Body only if native header editing should remain available. A template-bound page cannot use a custom body; resolve that design choice before proceeding rather than bypassing template locks.
2. Prepare a custom-body fragment with headings starting at H2. Do not include a second website menu, footer, document wrapper, or main landmark. Keep every content item readable in its unenhanced state.
3. Declare the supported reveal behavior in the custom section's behaviors array. Put data-custom-behavior="reveal" on its container and data-custom-reveal on the selected items. Reveals can use the container's data-custom-enhanced and each item's data-custom-visible state for styling.
4. Add restrained scoped CSS for the enhanced state only. Include a reduced-motion presentation that leaves items visible without movement. Do not hide content before enhancement, depend on motion to communicate meaning, or add arbitrary scripts or inline event handlers.
5. Review the proposal before saving. For an assistant update, use the latest expectedPageModifiedAt; a conflict means re-reading and reconciling, not forcing an older version over newer work. Save the complete supported source without removing unrelated behaviors.

Other supported modules include tabs, gallery, anchor navigation, orbit, video, and continuous carousels. Select the module that matches the actual interaction. A continuous carousel needs an accessible static or horizontally scrollable presentation when motion is disabled; it is not interchangeable with a simple reveal.

Verify motion and its absence

Inspect the normal public route on desktop and a touch device. Test keyboard navigation and a browser with JavaScript disabled. Enable the operating system's reduced-motion preference, reload, and confirm that all content remains readable. Change that preference while the page is open too.

If content disappears, remove the hiding rule before adding further effects. If validation rejects markup, use the supported module contract rather than switching to site-wide script injection. Read design and styling and recovery before broader changes.