Animating
Animate mode is a motion studio in your design file: keyframes, curves, behaviours, text, 3D, scenes, sound, video, and exports to MP4, GIF and Lottie.
Click Animate in the top bar and the editor becomes a motion studio. What you animate is still ordinary design work: the same frames, layers, components and styles. So a promo, a lower third or a product trailer lives in the same file as the screens it came from, and stays on brand when they change.
Description
A launch post is open in the editor. Animate is picked in the top bar. The headline is selected and the Rise preset applied from the timeline’s + menu, then the Launch badge gets Pop the same way. Home goes back to the start and Space plays: the badge pops and the headline rises into place.
New to it? Start with your first animation in 2 minutes.
Where animation lives
- A frame's timeline. Every top-level frame has one. Select a frame, or a layer inside one, and the timeline along the bottom shows it. With nothing selected the timeline says Animations belong to a frame.
- A motion component's timeline. A component can own a timeline, and every instance plays it on its own clock. See Motion components.
- A composition. Several frames play one after another as scenes, with transitions and sound. See Compositions and transitions.
The guide
| Page | What's in it |
|---|---|
| Your first animation | Two minutes from a still design to a moving one |
| Keys and the timeline | The transport bar, recording keys, picking and moving them, markers, the work area, layer time, onion skin, copy and paste, every shortcut |
| Curves | Easing presets, springs, hold, the curve editor and the graph editor (value and speed) |
| Motion paths | Bending a layer's path on the canvas, and the anchor point |
| Presets and stagger | Every entrance, exit, emphasis, camera and text preset, and staggering layers |
| Behaviours | Spin, drift, pulse, wiggle, bounce, loops, wrap, clamp and link: motion with no keys |
| Text animation | Letter, word and line animators, typewriters and counting numbers |
| Compositions and transitions | Scenes in sequence and the transitions between them |
| 3D | 3D scenes, cameras, lights and materials |
| Shaders and effects | Live shader fills and effects you can key |
| Audio | Sound on a composition, generated sound, beats and cutting to the beat |
| Audio-reactive motion | Layers, shaders and visualizers that follow the music: signals, the audio behaviour, the shader graph, music-video templates |
| Video | Video fills, and generating video clips with AI |
| Motion components | Components that animate, their inputs and how each instance plays |
| Playback and Stage view | Playing, looping, solo, and Stage view |
| Exporting | MP4, WebM, GIF, PNG sequence and Lottie (and importing Lottie) |
| Presenting and the web | Builds that wait for a click, smart animate, and motion on exported web pages |
| State machines | States that play stretches of the timeline, inputs, conditions and listeners: interactive animation for Present, dotLottie and the web |
| Animating with the agent | Every Animate action as an agent tool |
| Every feature | The complete list, each linked to where it's explained |
Start from a template
New → File → Motion has more than sixty animated templates to pull apart:
- Titles and reveals: Logo reveal, Kinetic headline, Title card 3D, Shader title, Pitch title, Section and Agenda slides.
- Kinetic type: Letters, Words, Lines, Typewriter, Word swap, Line reveal, Quote.
- Promos: Launch trailer, Beat drop, Sale drop, Event, New product, Quote reveal, Tip list, Glass promo.
- Social and video: Story ads, Countdown, Stat pop, Stat counter, YouTube intro, chapter, subscribe and end screen, Year in review.
- Charts: Bars, Line, Donut, Data counters.
- Music videos: Lo-fi loop, EDM drop teaser, Synthwave tunnel, Hip-hop lyric video, Indie spectrum poster, Podcast audiogram (1:1 and 9:16), Festival lineup reveal. Everything in them follows the track you drop in.
- Utility: Lower third, Stings (blur, pop, rise, shimmer), Transitions pack, Smooth and ambient loops, Template wall.
The Motion essentials kit in the asset libraries has animated components ready to drop in, and Audio reactive has waveforms, spectrums, a VU meter, a pulse ring, a beat flash and podcast audiograms that follow the sound.
Zooming and scrolling time
Time zooms the way it does in After Effects, and the same way in the keyframes, the graph editor and a composition:
| Gesture | Does |
|---|---|
| ⌥ Option / Alt + scroll, ⌘ / Ctrl + scroll, or pinch | Zoom time about the pointer: the moment under it stays where it is |
| Shift + scroll, or a sideways trackpad swipe | Pan time |
| Scroll | Scroll the layers (in the graph editor: the values; ⌘/Ctrl + Shift + scroll zooms them) |
| = / - | Zoom in / out about the playhead |
| ; | Zoom right in to frames, where each frame is wide enough to pick; press again for the whole duration |
| Shift+; or \ | Fit the whole duration |
The bar above the ruler is the time navigator: it stands for the whole duration, and the highlighted range is what is in view. Drag the range to move through time, drag either end to zoom, click elsewhere on the bar to jump there, and double-click it to fit. Fully zoomed out shows the whole duration; the ruler counts frames once you are zoomed in far enough to see them. Each frame's timeline and each composition keeps its own zoom and position while the file is open.
See also Lottie templates: sector packs of icons, loaders, states and hero loops that export to Lottie.