Appear on scroll

Appear on scroll plays once as a layer comes into view: a picture slides up, a heading is revealed line by line, a number counts up to its value. Unlike While scrolling, it is not tied to the scroll position: once it starts, it plays to the end on its own timing.

It plays in Preview and on your published site. People who ask for less motion see the layer in place, without it.

Add it

1. Select a layer inside a frame.
2. In the Prototype tab, press + next to Appear on scroll.

A text layer starts as Mask reveal, Line by line. Any other layer starts as Slide up. Both take 0.8 s on the Expressive curve, with no delay.

Pick an effect

Effect	What it does
Fade in	From transparent to visible.
Slide up	Rises a little as it fades in.
Mask reveal	Rises out of a mask, as if from behind a line. Made for text.
Blur in	From blurred to sharp.
Scale in	Grows into its size.
Custom	Your own start, with steps between.
Roll digits (text)	Each digit rolls round before landing on its value; other characters slide up.
Colour flash (text)	Each word lights up in a colour, passes through a second and settles on its own.

The settings

• Split text (text only): Whole text, Line by line, Word by word or Letter by letter.
• Easing: the curve, from the named curves (no springs).
• Duration (0 to 30 s) and Delay (0 to 30 s).
• Stagger (0 to 5 s): the time between one line, word or letter and the next. 0.08 s to start for lines.
• Starts when: This layer comes into view, or when another layer of the frame does. Use it to play a caption with its picture.
• Into view (0 to 100%, 15% to start): how far up the screen the layer’s top comes before it plays.
• Play every time (off): play again each time it comes back into view, not just the first time.

Roll digits adds Turns (0 to 10, 1 to start): how many times each digit rolls round. It always splits letter by letter.

Colour flash adds Lights up in and Passes through. It starts from your file’s accent colour (an orange when the file has none), one word at a time: 0.35 s for each word, 0.1 s apart.

Your own appear

Choose Custom to set where it Starts from: move, scale, turn, opacity, blur, what is hidden from each side, and colours. Add a step puts states in between, each at a percentage of the duration, up to 16. It ends on the layer as you designed it.

On the canvas

• The timeline in the section shows the delay, the duration and each line’s stagger as bars. Drag the bars to change them.
• Play scrolls the canvas to where it starts and plays it there.
• A dashed screen on the canvas shows the moment it plays. Drag it up to start sooner, down to start later; it sets Into view.

More in Motion on the canvas.

Advice in the panel

The section flags timing that tends to read badly: an appear over 1.2 s, text that is fully visible only after 2.5 s, Letter by letter on text longer than 60 characters, and a button delayed by more than 0.6 s.

Catches

• A layer below the end of the page never appears. The canvas says so and offers Fit height, which makes the frame tall enough.
• A frame no taller than the screen does not scroll, so everything in view appears as the page opens.
• Long staggers add up. Ten lines at 0.3 s apart take nearly three seconds before the last one starts; split by lines rather than words on long text.
• Appear plays once unless Play every time is on.

Appear on scroll is on every plan. To ship it as code outside uxdeck, use the site or code export (Pro).