Text while scrolling

A text layer can do more than move as a block while the page scrolls. Its lines, words or letters can each move in turn, and a one-line headline can be cut into slices that come together. Because it follows the scroll, scrolling back plays it backwards.

This article covers what is special to text. For the basics of While scrolling (adding it, the scroll range, the start and end states), read While scrolling first. For text that plays once on its own timing, use Appear on scroll instead.

The text looks

Select a text layer, add While scrolling in the Prototype tab, and open Scroll effect. Text layers get these looks on top of the ones for any layer. All of them play While it comes in.

Look	What happens
Light up words as read	Each word goes from dim (20%) to its full colour in turn, as if being read.
Slices come together	The line is cut into 4 slices; the words part from the centre and come together as you scroll.
Slices slide in from the side	The words slide in from one side, inside their slices.
Slices fan into place	The slices themselves come in turned, and settle level.
Slices stretch into place	6 slices open from flat and stretched, from the centre out.
Slices zigzag together	6 slices come in from above and below by turns.
Slices shift into line	6 slices start slightly out of line and close up.

Change any setting and the menu reads Custom.

Split text

Split text decides what moves:

• Whole text: the layer moves as one.
• Line by line, Word by word, Letter by letter: each piece moves from the start state to the end state in turn.
• In slices: the line is cut into horizontal strips.

Spread (5 to 100%; 30% to start for lines, words and letters, 100% for slices) sets how much the pieces overlap. Small is one after another; large is all together.

Words and letters

Split by words or letters and you get more control over the order and the path:

• Order: First to last, Last to first, From the centre out, From the edges in or At random.
• Turns about: the point each piece turns round when it rotates: Their centre, Their top, Their bottom, Their left, Their right, or Behind them, which swings letters round a point in depth.
• Vary each (0 to 100%): how differently each piece starts. Higher values may send some pieces in from the other side.
• Start outward from the centre: pieces part from the middle, the further out the further they travel.

For lines, words and letters:

• Slide out of its box: each piece starts hidden in its own box and slides into view From below, From above, From the left or From the right. No mask turns it off.

Combine them with the start state: for letters that tip forward into place, set At the start to a tip back of 90° and opacity 0, split Letter by letter, and set Turns about to Their bottom.

Slices

With In slices:

• Slices (2 to 12, 4 to start): how many strips.
• Order and Start outward from the centre, as for words.
• Move whole slices: the strips themselves move. Off, the words move inside strips that stay in place.

Catches

• On the canvas, text looks move the whole layer. The scroll bar beside the frame shows the text whole; the pieces, slices and lit words play in full in Preview and on your site.
• Slices are for one line of text. Keep the heading on one line at every breakpoint.
• Letter by letter on long text is slow to read. Keep it for short headlines.
• Fast parallax on text is hard to read: the panel suggests keeping it under 30%.
• People who ask for less motion see the text at rest, in its final place.

Text while scrolling is on every plan.