Ani Motion is a lightweight (8.59 KB including CSS) library that adds minimalistic animations to your Webstudio site, including on Radix Components.

How to use it

1. Insert Ani Motion – Go to the Marketplace and insert Ani Motion into your Project.
2. Add to pages – Add it to every page where you want animations. If you intend on using it on most pages, it's best to place it in a global Slot, like your navigation.
3. Add the attribute – On any instance, add the data-ani attribute with a value representing the animation effect, such as fade.

<aside> 💡 Note: To add custom attributes in Webstudio, select the instance in the Navigator, go to the Settings Panel, and click the + next to Properties & Attributes.

</aside>

Animation triggers

Ani Motion supports three types of animation triggers:

Intersection

data-ani

Animations play when the instance enters the viewport, running from start to finish.

data-ani fade

Scroll

data-ani-progress

Animations progress as the instance moves through the viewport.

data-ani-progress fade

State

data-ani

Animations run when changing between two states, like on Radix Components.

data-ani fade

Animation effects

Radix Components

All animation effects are compatible with Radix Components, which have various states such as active/inactive or open/closed. The animations automatically target these states, allowing you to use Ani Motion like any other component.

<aside> 💡 Note: Scroll-based animations (data-ani-progress) are not compatible with Radix Components since interacting with a dynamic component merits an animation to run from start to finish when triggered, not based on scroll position.

</aside>

Applying attributes to Radix Components

Radix Components have multiple instances, so it's important to add the animation attribute to the correct instance – the one carrying the state (e.g., open/closed). Here's where to apply the attribute: