Animations
Add entrance, hover, scroll and loop animations to an element from the Animate tab. Click and Mouse animations are shown but disabled.
For the complete documentation index, see llms.txt. This page is also available as Markdown.
Select an element and open the Animate tab. A column of six categories sits on the left, and four of them work. You choose a preset on the right, then its timing controls appear below the presets.
#Add an animation
Step 1: Select an element
The Animate tab needs a selected element.
Step 2: Open the Animate tab
Pick a category: Entrance, Hover, Scroll or Loop.
Step 3: Choose a preset
Click a preset to apply it to the element. The active preset is highlighted.
Step 4: Set the timing
Use the controls that appear below the presets. Preview plays an entrance, scroll or hover animation on the canvas, and Clear removes it.
#Categories and presets
| Category | Plays | Presets |
|---|---|---|
| Entrance | When the page loads | Fade In, Slide Up, Slide Down, Slide Left, Slide Right, Scale In, Fade+Slide, Stagger |
| Hover | While a visitor points at the element | Grow, Shrink, Lift, Glow, Rotate |
| Scroll | As the element scrolls into view | Fade In, Slide Up, Slide Down, Scale In, Fade+Slide, Stagger |
| Loop | Repeats | Pulse, Float, Bounce, Spin, Shimmer, Glow, Shake, Marquee |
| Click | Disabled | Not available |
| Mouse | Disabled | Not available |
#Timing controls for Entrance, Hover and Scroll
| Control | Range or options | Default |
|---|---|---|
| Duration | A slider from 100 to 3000 ms in steps of 50 | 800 ms |
| Delay | A slider from 0 to 2000 ms in steps of 50 | 0 ms |
| Easing | Ease, Ease In, Ease Out, Ease In-Out, Smooth, Spring, Bounce | Smooth |
| Distance (px) | A number. Shown for the Slide presets and Fade+Slide | 40 |
| Stagger Gap (ms) | A number. Shown for Stagger | 120 |
An element holds one Entrance, Hover or Scroll animation at a time, because they share a single slot. Choosing another replaces it. A Loop animation is stored separately, so an element can have both.
#Loop controls
A Loop preset starts with its own timing, and a Loop always sets itself to repeat forever until you change Repeat.
| Preset | Starts at | Timing |
|---|---|---|
| Pulse | 2s | Ease In-Out |
| Float | 3s, alternating direction | Ease In-Out |
| Bounce | 1s | Ease In-Out |
| Spin | 2s | Linear |
| Shimmer | 2s | Linear |
| Glow | 2s | Ease In-Out |
| Shake | 0.5s | Ease In-Out |
| Marquee | 15s | Linear |
| Control | Options |
|---|---|
| Duration | A value such as 2s |
| Timing | Ease, Ease In, Ease Out, Ease In-Out, Linear |
| Repeat | Infinite, 1, 2, 3, 5 |
| Direction | Normal, Alternate, Reverse, Alt. Reverse |
| Delay | A value such as 0s |
Hover effects also exist as Hover Styles in the Design tab, where you can set exact colours. See The Design inspector.
#Limits
- Click and Mouse animations are present in the tab but disabled, so you cannot apply them.
- The AI chat can add an animation too. See Edit with AI chat.
#Common questions
They are flagged disabled in the editor and cannot be used yet.
Select the section and open the Animate tab. The tab applies to whichever element is selected.
Yes. A preset, a changed timing value and Clear each record an undo step. Press CmdZ or use the Undo button.
Open the Loop category and press Clear.