Understanding IN/OUT animations

How entrance and exit animations work, how to set presets, duration and delay on a subcomposition.

ConceptIntermediateUpdated 2026-10-28

IN/OUT animations define how your overlays enter and exit the screen.

A lower third sliding in and out on the canvas — An overlay playing its IN and OUT animations.

How it works

Each subcomposition has two animation slots:

IN animation: plays when the overlay appears
OUT animation: plays when the overlay disappears

You set these in the Inspector when you select a subcomposition. Individual elements also have their own IN / OUT (and UPDATE) animations.

Setting an animation

Select a subcomposition in the Composition Tree.
In the Inspector, find the Animation section.
Choose an IN preset from the dropdown.
Choose an OUT preset from the dropdown.
Set the duration (default: 500ms).

Available presets (52 total)

Some popular presets:

fadeIn / fadeOut: simple opacity fade
slideInLeft / slideOutLeft: slide from/to the left
slideInRight / slideOutRight: slide from/to the right
slideInUp / slideOutDown: slide from bottom / to bottom
popIn / popOut: scale bounce effect
news-slideIn: classic news lower third animation
sports-wipeIn: sports-style wipe effect

Duration

Set in milliseconds. Common values:

300ms: quick, punchy
500ms: standard broadcast feel
800ms: smooth, cinematic
1000ms+: dramatic, slow reveal

Delay

You can add a delay before the animation starts. Useful when multiple subcompositions need to animate in sequence.

Tips

Match IN and OUT directions (slideInLeft + slideOutLeft looks natural).
Use the same animation style across all overlays in a graphic for consistency.