Bring your designs to life with smooth, CSS-based animations powered by the browser's built-in Animation API. Animations are integrated with the Interactions tool, enabling you to use various triggers to create dynamic, interactive animations.
⚠️ Beta Feature
This feature is currently in open beta, which means you may encounter issues. Please contact our support team to report any problems.
Getting Started with Animation Interactions
To animate an element with interactions:
Select the 'Animate' action.
Choose between:
Animation Presets (quick and ready-made effects).
Custom Animations (advanced animations with keyframes)
Tip: If you're unfamiliar with the Interactions tool, we recommend reading our article on how to use interactions first.
Using Animation Presets
Animation presets provide quick, ready-made animations that allow you to set up designs efficiently. You can animate elements to:
Animate In (appear into view)
Highlight (draw attention)
Animate Out (exit view)
How to Use Presets
Choose 'Animate' as your action. By default, the Fade in preset is applied.
Open the Animation dropdown to see all preset options.
Hover each option to preview the animation on the canvas.
Select a preset by clicking an option from the list.
Once selected, additional settings are revealed to adjust the preset.
Creating Custom Animations
For advanced designs, use custom animations with keyframes. Keyframes define specific states of an element at different points in the animation timeline.
How Keyframes Work
When creating a custom animation:
The first and last keyframes are automatically added to your interaction target:
The first keyframe sets the initial animated state.
The last keyframe sets the final animated state.
The browser handles transitions between all keyframes.
Each keyframe has a timeline point between 0%-100%, specifying when the keyframe should apply throughout the timeline.
Supported Style Properties
Position (translate)
Size
Rotate or 3D Transform
Opacity
Editing Keyframe Properties
Select a keyframe to access keyframe settings.
Click the '+' button on the property you want to animate.
Adjust the values of the property.
Click the 'play' button to preview the full animation on the canvas.
Adding and Deleting Keyframes
You can add as many keyframes as needed to create the effect you are after. Click the '+' button next to the play button to add another keyframe. To remove a keyframe, open keyframe settings and click the 'delete' button.
Set the Type of Animation
The type of animation defines how elements appear before and after the animation timeline starts and ends. As a general rule, choose the type of animation based on the animation you want to create:
In: When you want the element to appear in view.
Out: When you want the element to exit view.
Highlight: When you want to draw attention to your element.
For example, if you create an animation that starts at opacity 0% and ends at opacity 100%, select 'In' as your animation type.
Animation Settings
Easing Curve: Smooth out animations using predefined or custom easing curves.
Duration: Define how long the animation will play in seconds.
Delay: Add a delay in seconds before the animation begins after a trigger.
Attach to scroll: Sync animations with user scrolling. The animation progresses as the user scrolls.
Loop: Enable the Loop option for animations to repeat continuously.
Best Practices
Follow these guidelines to ensure animations enhance rather than distract:
Keep It Subtle: Avoid overwhelming users with excessive movement. Aim for clean, purposeful animations.
Focus on Timing: Natural speeds improve user experience. Too fast feels abrupt; too slow feels laggy.
Test Across Devices: Verify animations work smoothly across different screen sizes and performance levels.
⚠️ Performance Tip
Avoid using new animation interactions with the existing Animation Addon to ensure optimal performance.