Animations play when the instance enters the viewport, running from start to finish. On each box there is an attribute data-ani and the value is whatever is in the animated box. By default, their animation plays once, but that can be customized (see docs).
Animations progress as the instance moves through the viewport. On each box there is an attribute data-ani-progress and the value is whatever is in the animated box. By default, their animation plays every time, but that can be customized (see docs).
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 data-ani like any other component. See docs for information on which instance to apply the attributes to.
To animate all children within a parent instance, instead of applying data-ani to each child, apply the animation to the parent instance and add data-ani-children="true". This applies the animation to each direct child rather than the parent itself. (see docs).