Scenes and recipes

Add motion to an element with a recipe, tune its knobs, preview and scrub it, and read the warnings the motion panel shows before you publish.

Updated10/26/2026

A scene is motion that plays on a page: an element that rises into view, a wordmark that docks into the header as you scroll, a sequence of frames scrubbed by the scroll. You build a scene from a recipe and set a few knobs; the preview replays it as you change them. This page shows how to add one, check it and fix what the panel warns about.

Before you start #

You need the Content editor or Super admin role. A Content author sees "Your role (…) can't change animations. Ask a designer." instead of the panel.
Open the page in the editor. Scenes belong to a page: while the Header or Footer is open in Layers, the panel says "Scenes play on the page. Open the page in Layers to add one." A page scene can still move elements of the header and footer.
Know the three kinds of motion the editor has, so you pick the right one:

Kind	Where	Use it for
Reveal	Inspector › Motion › Reveal	One element's entrance when it scrolls into view (fade, fade up, scale, blur).
Scenes	Inspector › Motion › Scenes	Anything tied to the scroll, the first touch, the header or several elements at once.
Transitions	Inspector › Styles › Transitions	Hover, focus and state changes, written as CSS.

Add a scene from a recipe #

In Layers or in the preview, select the element that should move.
In the inspector, open the Motion tab. Under Scenes you see "No scene plays on this element." when it has none.
Choose Add a scene. The recipe list opens: every recipe with its name and a one-line description.
Choose a recipe. It is applied at once with its starting knobs, and the preview plays it.
Change the knobs in the open card. Each change shows at once and is saved a moment after you stop.
Choose Play again to replay it from the start.

If the recipe needs an element you have not picked yet (a place in the header, for Dock into the header), the card stays dashed with "Pick what it moves to apply it." Set the missing picker and the scene is applied.

To leave without adding anything, choose Cancel. Start from scratch adds a plain fade-up on the element and opens Advanced straight away, for hand-built scenes.

The recipes #

Recipe	What it does	Main knobs
Intro on the first touch	On the visitor's first scroll, tap or key, the element flickers on.	What lights up · Length · Hold the page still during the intro · Plays (Every visit / Once per visit) · How much it flickers · At the end
Build up on the first touch	On the first input, the element's pieces appear one after another.	What builds up · Length · Hold the page still during the intro · Plays
Dock into the header	As the page scrolls, the element moves into a place in the header and stays there.	What docks · Place in the header · Starts after · Counted from (The top of the page / When it reaches the header) · Lasts · Size on desktop · In the place · Easing
Menus appear	A header element stays hidden until the scroll has come this far.	What shows · Starts after · Lasts · Shows at
Reveal on scroll	The element fades in and rises as it comes into view; with a delay, its items one after another.	What appears · How far it rises · Delay between items
Parallax	The element moves slower than the page.	What moves · Depth
Read along	Words light up one after another as the text passes a reading line.	The words · Reading line · Strength of the words still to read
Payoff pushed away	Past a point the element fades in; what comes from below pushes it away.	The payoff · What pushes it · Appears after · Space above what pushes it
Hide after scrolling	The element hides once the page has scrolled this far, and comes back on the way up.	What hides · Hides after
Image sequence on scroll	A sequence runs from its first frame to its last as the page scrolls.	See Image sequences.
A word per section	A text types the word of the section in view, erasing back to the letters it shares with the last one.	Where it types · Words, one per section · Speed · The first word
Invert over photos	The element switches to its inverted look over photos, or over dark backgrounds too.	What inverts · Inverts over
Snap to panels	When the visitor stops scrolling, the page settles on the nearest panel.	How it snaps · Wait before snapping · Snap when within

Knob fields #

A number has a slider and a box, limited to the knob's range.
A distance in screens has a unit toggle, screens or px. The value is stored in screens, so it follows the visitor's screen height; px shows it at the preview's height.
A list takes one word per line ("One per line, in page order").
An element picker offers the selected element, its parts and the other elements selected in Layers, or the elements of the header or footer.
Easing shows four chips: Linear, Gentle, Smooth out, Snappy, each with its curve.

Preview and scrub #

Under the preview, the Motion bar helps you check scroll scenes:

Drag the slider (Scroll the preview through this scene) to move the preview through the scene's scroll range. With several scroll scenes, pick one in Scene to scrub first. The bar shows the range as "Starts at … · ends at … screens".
Tick Reduce motion to see the page as a visitor with reduced motion sees it (see Reduced motion).
Tick JavaScript off to see the server's markup, which is each scene's final, visible state.

In Edit preview mode some blocks hold still so you can select them ("Some blocks hold still while you edit. Live plays all motion."). Switch Preview mode to Live to see the page as a visitor does. In Live, an intro on the first touch plays on every load, so you can check it repeatedly.

Edit by hand under Advanced #

Advanced holds every field the knobs do not show: the trigger, the scroll edges and offsets, Follow the scroll (scrub), Pin the element while it plays, each animation's From and To, Duration, Easing (or a site easing), Where it plays (breakpoints, pointer), Set a state while it plays, With reduced motion and the effect seed.

Open the card, then Advanced.
Change a field. The card header gets an edited badge and "Edited by hand: the recipe knobs no longer describe this scene."
To go back to the recipe, choose Reset to recipe. Changing a knob on an edited scene also rebuilds it from the recipe, so your hand edits are lost.

A change the scene contract refuses is not saved: the card shows "This scene is not saved: …" with the reason.

Reveals and effect presets #

For a simple entrance you do not need a scene:

Select the element and open Motion › Reveal.
Choose Add a reveal, then an Effect: Fade, Fade up, Fade down, Fade from the right, Fade from the left, Scale up or Blur in.
Optionally tick Reveal its children one after the other and set Delay between children (ms), Play again each time it comes into view, and Starts when this much is in view (%).

Effect presets bundles a reveal with transitions. Choose one to apply both to the selected element in one step (one undo restores it). To keep your own, set up an element and choose Save as effect preset…, give it an Effect name and choose Save effect.

What you see #

Under Scenes, the cards for this element, and under On the whole page the scenes that name no element of the page (an intro, menus in the header, snapping). These show under every element.
A card header: the recipe name (or Custom animation), when it plays, and edited if you changed it by hand.
Plays: when the scene starts, in plain words, such as "When it comes into view", "While the page scrolls" or "On the visitor's first scroll, tap or key".
In the top bar, Motion load: light / moderate / heavy. Its tooltip gives the points the page's animations use against the budget. A heavy page can stutter on slower devices.
A reason line in the card when a scene has a problem:

Reason line	What to do
An element this animation uses is no longer on the page.	Pick another element, or remove the scene.
An element this animation uses appears in more than one place, so it cannot tell which to move.	Pick one specific element.
This animation changes the state of an element that already manages its own.	Animate an element inside it, or another one.
Another animation moves the same property of the same element at the same time.	Remove one scene, or move one to another property or time.
The scroll range ends before it starts, so nothing shows.	Make the end come after the start.
The element stays invisible when the animation ends.	Make the last keyframe visible.
Its conditions rule out every screen, so it never plays.	Widen Where it plays.

Pitfalls #

Pitfall: Deleting an element that a scene moves does not delete the scene. The card shows the "no longer on the page" line, and publishing is refused with "An animation on page “…” moves something that is no longer there:". Fix or remove the scene before you publish.

An intro on the first touch holds the page still until the visitor scrolls, taps or presses a key, unless you set Hold the page still during the intro to No. It opens by itself after 8 seconds without input. It does not play when the page opens on an anchor link or already scrolled, and with Once per visit only once per browser tab session.
A word per section gives one word to each section that has an Anchor, in page order. A section without an anchor gets no word. The Anchor field is in the section's Settings tab in the inspector.
Two scenes on the same element and property fight; the reason line tells you, the preview may not.
Undo is the editor's normal history: one applied recipe or one hand edit is one step.
Snap to panels changes how the whole page scrolls. Try it on a phone-sized preview before keeping it.

Something wrong on this page? Write to docs@librettocms.com.