Topics

Animated Text

Animated Text traces the outlines of a short phrase, then fills the letters with color. Use it for a heading, a signature or a few words that deserve attention.

Choose Animated Text from Insert or the Add Element menu, replace the placeholder wording, and choose a font and size in Text Style. The drawing follows that font’s outlines; it does not use a separate handwriting font or a video.

Try a timed writing effect

The example below starts when it becomes visible, waits 0.2 seconds and draws over 2.4 seconds. Fill Character is on, the blue stroke fades after drawing, and the finished words remain visible. Loop and Fade Out are off.

A native Animated Text element: “Create something”. Reload Preview to play the one-time example again.

Style the stroke and fill

Stroke Color controls the tracing line; the text’s own color controls the finished fill. Set Stroke Width for a fine outline or a heavier line. Stroke Backwards reverses the tracing direction.

Under When Stroke Ends, enable Fill Character to reveal solid letters. Remove Stroke offers No, Fade Out or Destroy Path. No retains the outline; Fade Out dissolves it; Destroy Path progressively removes the traced line. Remove Stroke Delay holds it before removal.

Choose timing and playback

Start When Visible waits until the element enters the browser viewport. With it off, playback can begin as the page loads, even when the element is farther down the page. Basic timing supplies Start Delay and Animation Time; Fill Time controls how quickly the letter interiors appear.

Advanced timing exposes Stroke Time, Stroke Delay and Char Delay, with randomizers for variation. Use small amounts of variation when you want less regular pacing. Enable Loop only when the phrase should repeat, and check that repeated motion does not distract from nearby content.

Let scrolling draw the words

Enable Play While Scrolling to tie progress to the visitor’s scroll position. Scrolling down draws the text; scrolling back up reverses it. Animation Speed controls the rate of progress. The example below uses the default 1× speed.

This is an alternative to a timed reveal. Leave enough page content around the example for visitors to move through its progress range, and test both scroll directions in Preview.

Scroll down and then back up to compare the outline and fill of “Scroll to draw”.

Decide whether the result stays

Fade Out is a separate effect on the finished text. Turn it off when the words should remain readable. Basic fade-out sets Time, target Opacity and Blur. Advanced fade-out can stagger individual characters and add direction, scale, rotation, a 3D effect or blur.

A headline that loops and fades can be an accent, but essential information should also be available as ordinary text. Avoid making a visitor wait for a complete animation to understand the page.

Check the complete page

Preview with normal and reduced-motion preferences. Sitely respects the visitor’s reduced-motion setting; the words should remain available when the drawing effect is reduced. Check line breaks, stroke contrast and the final fill against the background.

Keep phrases short and use project fonts. Animated Text is different from the Typewriter smart field, which types and deletes characters, and from a normal text element with an entrance animation. Choose the tool that matches the intended result.

See Text for typography, Accessibility for readable content, and Preview for testing playback and device layouts.

Please report any shortcoming in this documentation and we’ll fix it as soon as possible!

Updated for Sitely 8