Ani Motion — Minimalistic Animations for Webstudio

Ani Motion is a lightweight (8.59 KB including CSS) library that introduces minimalistic animations to Webstudio sites, including Radix Components.

Key Features:

• Animation Triggers:

  • Intersection (data-ani): Animations activate when the element enters the viewport, running from start to finish.
  • Scroll (data-ani-progress): Animations progress as the element moves through the viewport.
  • State (data-ani): Animations trigger upon state changes, such as in Radix Components.

• Supported Animation Effects:

  • fade, slide-up, slide-down, slide-left, slide-right, zoom, flip-y, flip-x, expand (primarily for Radix Components with open/closed states like Accordions).

Implementation Steps:

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 footer.
3. Add the attribute – On any instance, add the data-ani attribute with a value representing the animation effect, such as fade.