Element Animations
Animations attach to a single element in the "Animation" group and play whenever the element's pane becomes active - on load and on every navigation to it. The picker previews each animation live as you hover.
There are two fundamentally different kinds, and mixing them up is the most common animation mistake:
- One-shot animations play once when the pane arrives, then the element settles into its final state and stays. These are entrances.
- Looping animations (marked with an infinity icon in the picker) run continuously while the pane is visible - ambient motion that never settles.
#Animation Types
| Kind | Types |
|---|---|
| One-shot | Fade, Blur, Pop, Stomp, Drop, Twirl, Succession, Slide In X, Slide In Y, Scale In X, Scale In Y |
| Looping | Spin, Rotate, Bounce, Pulse, Zoom, Drift X, Drift Y |
| Text only | Typewriter, Letter Fade, Letter Scale, Letter Blur, Number Roll |
| Shape only | Draw - see Shapes |
| Chart only | Chart - see Charts |
| 3D model only | Rotate X, Rotate Y, Laptop Lid - see 3D Models |
Zoom, Drift X, and Drift Y are the gentle ones - slow 20-second cycles made for backgrounds. The rest of the looping set is much more energetic.
#Parameters
Once a type is chosen, up to four controls appear:
- "Speed" - a duration multiplier from 0.1x to 5x. Higher is faster: 2x runs in half the base time.
- "Scale" - an amplitude multiplier for animations with a "how far" component (Pop, Drop, Bounce, Drift, Slide In, and similar). It does nothing for purely visual ones like Fade or Blur, so it only shows where it applies.
- "Delay" - seconds to wait before starting.
- "Reverse" - flips direction where that makes sense: looping spins and drifts run the other way, slide-ins arrive from the opposite side.
#Staggering
A list where every item fades in at once reads as a blink. Give the items the same animation with stepped delays - 0s, 0.1s, 0.2s - and it reads as a sequence. Delay is the tool for choreographing a whole pane: headline first, body next, accent last.
#Pacing Text Animations
The per-character text animations default to a slow, cinematic pace of 1.5-2 seconds. That is right for luxe and contemplative moods but sluggish for a punchy headline - and nudging "Speed" to 1.2x barely changes it. For snappy delivery go to 2.5x-4x, which lands a title in well under a second. More in Text.
#Taste Notes
- Animations layer on top of the element's position and transforms: the transform places the destination, the animation describes the motion into it.
- One looping animation per pane is usually enough - a slowly zooming hero image, say - with one-shot entrances for everything else. Several looping elements compete for attention.
- To see animations while editing, toggle "Animation Preview" (CTRLA); the full-screen Preview (CTRLP) always plays them.
#Next
- Transitions & Morphing - motion between panes, not within them
- Text - the text animation set in detail
- Shapes - the draw animation
