Add entrance animations to components
Attach an entrance animation to a supported component by selecting it, opening its Animation tab in the inspector, and choosing a built-in preset or your own animation. You can then edit the animation's properties, add component-specific overrides, set when it plays, and sequence child components.
Where you can use entrance animations
The Animation tab appears in the component inspector for eligible components in Site and Embed apps. Document apps do not have it.
Eligible components are Page, Box, Section, Columns, Column, Heading, and Text. The tab is not available for a Text component placed directly inside a TextBox. The animation picker lists only animations compatible with the selected component.
Attach a preset animation
Select a supported component and open its Animation tab.
Open the animation picker beneath the Animation heading. With nothing selected it shows Select animation, or Connect animation when the component already has animation settings.
Choose one of the built-in presets: Fade, Move up, Move down, Move left, Move right, Scale up, Pop, Zoom out, Blur in, or Text reveal.
Selecting a preset attaches it. The picker then shows the animation's name, with Edit animation and Detach beneath it.
Create a custom animation
Create new animation is the last item in the animation picker, below a divider. It also appears as a bottom action when the component has animation settings with no animation selected or with overrides.
Open Create new animation.
In the popover, enter a name in Animation name. The name is required and can be up to 200 characters.
Leave Available across workspace off to keep the animation available only in the current app, or turn it on to share it with other apps in the workspace.
Select Create. The animation is saved, attached to the component, and opens in its editing view.
Edit animation properties
Open the editing view with Edit animation beneath the selected animation, or with Edit beside an animation in the picker. The editing view has Back, an Animation name field, and a Properties group. Trigger and sequence controls are hidden while you edit the animation definition.
Property | Values |
|---|---|
Fade | From and To, in %, from 0 to 100 |
Scale | From and To, in % |
Blur | From and To, in px |
Direction | Move offset applies when Direction is anything but No movement or Custom. Offset X and Offset Y apply when Direction is Custom. |
Motion curve | Spring smooth, Spring bounce, Ease in, Ease out, Ease in and out, Back, Bounce |
Duration | Seconds, minimum 0 |
Text | Heading and Text components only: Whole text or Words |
Word delay | Heading and Text components only, when Words is selected |
When you edit a built-in preset and it differs from its original, the editing view offers Revert changes to restore it.
Set per-component overrides
An override keeps selected properties on this component different from the shared animation definition, without changing the animation for every other component that uses it.
With an animation attached and not in the editing view, open the Animation overrides group in the Animation tab.
Use the Add animation override control and choose a property that is not already overridden.
Set the override's values. Each override has a Remove override action.
Set when the animation plays
Under Trigger in the Animation tab, when an animation is attached and you are not editing the animation:
Setting | What it does |
|---|---|
Location in view | Choose Top, Middle, or Bottom. |
View offset | A value in px. Positive values start the animation later, negative values earlier; this does not change the movement itself. With Bottom selected, 100px starts the animation when the component is 100px inside the viewport. |
Delay | Seconds, minimum 0. |
Replay scroll up | Off or On. On replays the animation when the visitor scrolls back up. |
Sequence child components
Below Trigger, Columns, Section, and Box components get a sequence control that sequences their direct child components.
Component | Control | Options |
|---|---|---|
Columns | Columns | All columns, First to last, Last to first |
Section | Components | Whole section, First to last, Last to first |
Box | Components | Whole box, First to last, Last to first |
Columns animate together or with a short delay between them. A column with its own animation uses that animation.
With First to last or Last to first selected, child components that already have their own animations, including in their children, are skipped.
Check playback
Animations play in the editor Preview and on published standalone pages and embeds. Playback respects the visitor's browser or device reduced-motion preference.
Use Reload animations, beside the Animation heading in the Animation tab and also in the editing view header, to reset animation playback in the editor.
Animation edits reach the live site when you publish changes, like any other edit. See Preview and publish your website.
Detach or remove an animation
Detach unlinks the animation from the component but keeps the component's animation settings as local settings.
Remove animation, the trash icon beside the Animation heading, clears all animation settings from the component.
What happens to animation settings
Animation settings are preserved when an app is published, duplicated, moved between workspaces, or restored from a version.
Deleting an app-specific animation leaves the components that used it with local settings.
For the full build workflow before you animate components, see Build your first website.