The Animations tab is a library of prebuilt animations you can apply to elements — a fast way to add motion without authoring keyframes by hand.
Where: Left sidebar → Design System → Animations — Open the Design System panel
Key ideas
- Prebuilt library: A set of ready-made animations to drop onto elements.
- Apply to selection: Pick an animation to attach it to the selected element.
Steps
- Open Design System → Animations.
- Select an element.
- Choose an animation from the library to apply it.
Project animation library
- The tab groups existing project interactions by category and shows the number in each group.
- Each interaction remains editable from its row. Duplicate an interaction when you want a separate variation; remove one row to delete only that interaction.
- Use Select to enter bulk-selection mode, select individual rows or a whole category, then delete the selected interactions or finish selection.
Add versus manage
- The Animations tab manages interactions already in the project; it is not the only place to author one.
- When no animation exists, select an element and add an interaction from the Interact panel, then return to this tab to review and manage it.
- Applying or editing an interaction is distinct from adding a static animation asset to the page.
Tips
- Give similar interactions clear names so the project-wide list is easier to scan.
- Use bulk selection for cleanup, then preview the affected elements before publishing.
Limitations and important notes
- The library is project-wide; it does not replace selecting a target element to author a new interaction.
Troubleshooting
The Animations tab is empty.
Select an element and add an interaction from the Interact panel; the library lists interactions that already exist in the project.