Search Docs
Loading...
Skip to content

Text Animations

Create engaging text animations that reveal content line by line, word by word, or character by character with granular control over timing and overlap.

5 mins
estimated time
GitHub

Text animations in CE.SDK animate text blocks with granular control over how text appears. Unlike standard block animations, text animations support writing styles that determine whether animation applies to the entire text, line by line, word by word, or character by character.

This guide covers text-specific animation properties like writing styles and segment overlap, enabling dynamic text presentations in your designs.

Text Animation Fundamentals#

We create animations by first creating an animation instance, then attaching it to a text block. The animation defines how the text animates, while the text block contains the content and styling.

let baselineAnimation = try engine.block.createAnimation(.baseline)
try engine.block.setInAnimation(text, animation: baselineAnimation)
try engine.block.setDuration(baselineAnimation, duration: 2.0)

Animations are created using createAnimation with a type like .baseline, .fade, or .pan. We attach the animation to the text block’s entrance using setInAnimation and set its duration with setDuration.

Writing Style Control#

Text animations support different granularity levels through the textAnimationWritingStyle property. This controls whether the animation applies to the entire text at once, or breaks it into segments (lines, words, or characters).

Line-by-Line Animation#

The Line writing style animates text one line at a time from top to bottom. Each line appears sequentially, creating a structured reveal effect.

try engine.block.setEnum(
  baselineAnimation,
  property: "textAnimationWritingStyle",
  value: "Line",
)

Word-by-Word Animation#

The Word writing style animates text one word at a time in reading order. This creates emphasis and draws attention to individual words.

try engine.block.setEnum(
  baselineAnimation,
  property: "textAnimationWritingStyle",
  value: "Word",
)

Character-by-Character Animation#

The Character writing style animates text one character at a time, creating a typewriter effect. This is the most granular animation option.

try engine.block.setEnum(
  baselineAnimation,
  property: "textAnimationWritingStyle",
  value: "Character",
)

Segment Overlap Configuration#

The textAnimationOverlap property controls timing between animation segments. A value of 0 means segments animate sequentially, while values between 0 and 1 create cascading effects where segments overlap partially.

Sequential Animation (Overlap = 0)#

When overlap is set to 0, each segment completes before the next begins.

try engine.block.setFloat(
  baselineAnimation,
  property: "textAnimationOverlap",
  value: 0.0,
)

Cascading Animation (Overlap = 0.4)#

When overlap is set to a value between 0 and 1, segments animate in a cascading pattern, creating a smooth, flowing effect.

try engine.block.setFloat(
  baselineAnimation,
  property: "textAnimationOverlap",
  value: 0.4,
)

Combining with Animation Properties#

Text animations can be enhanced with standard animation properties like duration and easing. Duration controls the overall timing, while easing controls the acceleration curve.

try engine.block.setDuration(baselineAnimation, duration: 1.5)
try engine.block.setEnum(baselineAnimation, property: "animationEasing", value: "EaseOut")
let writingStyleOptions = try engine.block.getEnumValues(ofProperty: "textAnimationWritingStyle")
let easingOptions = try engine.block.getEnumValues(ofProperty: "animationEasing")

Combining writing style, overlap, duration, and easing gives complete control over how text animates.

API Reference#

MethodDescription
engine.block.createAnimation(type)Create a new animation instance
engine.block.setInAnimation(block, animation:)Apply animation to block entrance
engine.block.setOutAnimation(block, animation:)Apply animation to block exit
engine.block.setLoopAnimation(block, animation:)Apply looping animation to block
engine.block.setDuration(anim, duration:)Set animation duration in seconds
engine.block.setEnum(anim, property:, value:)Set enum property (writing style, easing)
engine.block.setFloat(anim, property:, value:)Set float property (overlap value)
engine.block.getEnumValues(ofProperty:)Get available enum options for a property

Next Steps#