Learning Studio / features

Configure block entrance, hover, and loop animations

Add entrance, hover, and loop effects to blocks with configurable duration, delay, easing, repeat, and stagger options.

Configure block animations

Add entrance, hover, and loop effects to any block to bring pages to life as learners scroll. Animations play in Preview and in the learner view; learners with reduced-motion preferences see no motion.

Select a block on the canvas.
In the inspector, find the Animation group.
Set the options you want:
- Entrance — how the block appears when it scrolls into view. Choices: fade, slide up/down/left/right, zoom in/out, blur in, flip, reveal, and bounce in.
- Easing — the motion curve: ease-out, spring, ease-in-out, or linear.
- Duration (ms) — how long the entrance lasts. Range: 100–5000 ms; default 600 ms.
- Delay (ms) — wait before the entrance begins. Range: 0–5000 ms; default 0 ms.
- On hover — an effect when a learner points at the block: lift, grow, glow, or tilt.
- Loop emphasis — a continuous motion while the block is visible: pulse or float.
- Play every time it scrolls in — repeat the entrance each time the block re-enters the viewport. Off by default, so the entrance plays once.
- Stagger items — animate child items in sequence rather than all at once. Useful for accordions, tabs, and lists.
Press Play to preview the animation inline.

The editor with a text block selected; the inspector's Animation panel shows Entrance, Easing, Duration, Delay, On hover, Loop emphasis, repeat and stagger switches, and a Play button. — Select a block, enable Developer Mode, and open the Animation panel to configure entrance, motion, and preview. Full-resolution PNG

The block animation inspector panel with an entrance effect selected and duration, delay, and easing controls visible. — The Animation group in the inspector with entrance, hover, and loop controls for a selected block. Full-resolution PNG

The block animation inspector panel on a phone-width screen with an entrance effect selected. — The Animation group is available on phone-width screens through the inspector drawer. Full-resolution PNG

The block animation inspector panel with an On hover effect and Loop emphasis selected, and the Play every time it scrolls in toggle visible. — Add an On hover effect or Loop emphasis, and toggle repeat and stagger options. Full-resolution PNG

Start with an Ascent motion preset

In the advanced styling controls, Ascent motion presets applies an existing combination of animation settings: Ridge arrival slides upward gradually, Trail sequence fades supported child items in sequence, and Field card fades in and lifts on hover. You can adjust the resulting settings afterward. Reduced-motion preferences still apply.

How to use it

Animations help draw attention to key content and create a sense of flow as learners move through a page. A gentle fade or slide-in on a callout can make an important tip feel intentional without being distracting.

Use entrance animations sparingly — one or two per page is usually enough. Loop effects like pulse and float are best for highlights you want learners to notice, not for every block. Hover effects give interactive elements like buttons a responsive feel.

If a block is locked, animation controls are disabled. Unlock the block first to change its animation.

Availability and limits

The Animation group appears for most blocks. It is hidden for separators marked as decorative.
Animations are learner-view only; they do not change how content is authored or saved.
Values are validated on save. Unsupported entrance, hover, loop, or easing values are rejected, and duration and delay are clamped to their allowed ranges.
Reduced-motion users see no motion. The preview note in the panel confirms this behavior.