Module 4 of 6 · Intermediate · 9 min read

Animation and motion design

Use AI for motion graphics, UI animation, character animation and scripting in animation tools.

Key takeaways

1For precise motion (UI, logos, titles), have AI write code or expressions, not generate video.
2For organic motion, use image-to-video or AI-assisted character animation.
3Describe timing in seconds and easing, like an animator would.
4Keep source files editable so you can tweak timing after generation.

01Two kinds of animation work

Precise, designed motion such as UI transitions, animated logos, kinetic type and explainer graphics needs exact timing and brand accuracy. Video generators are poor at this; AI shines instead by writing the code, expressions or scripts that drive it. Organic motion such as characters, nature and camera moves is where generative video and AI-assisted rigging help most.

Code-driven: CSS and JavaScript animation, Lottie, SVG, After Effects expressions, Blender Python.
Generated: image-to-video, AI motion capture from video, AI in-betweening and lip-sync.

02The workflow

Timing is the soul of animation; plan to adjust it yourself.

Storyboard the key moments with timings.
Decide per shot: code-driven precision or generated motion.
For code-driven parts, have AI write the animation, then tune timing by hand.
For generated parts, start from approved key frames.
Assemble in your editor or animation tool, then add sound.
Review at the real size and frame rate on the target device.

03Tools to reach for

Ask AI to explain what each line of an expression or script does so you can tweak it confidently.

Coding assistants for CSS, JavaScript animation libraries, SVG and Lottie.
Motion design tools with scripting or expressions, and their AI features.
3D tools with Python scripting for procedural and repetitive animation.
AI tools for motion capture from ordinary video, lip-sync and frame interpolation.

04Prompt: UI micro-interaction

Give durations, easing and accessibility requirements.

Example

Write CSS (and minimal JavaScript only if necessary) for a 'save' button micro-interaction: on click, the icon morphs into a spinner (200ms), then into a checkmark (250ms, ease-out with a slight overshoot), then returns to the default state after 1.5s. Use transform and opacity only, for performance. Respect prefers-reduced-motion by replacing the motion with a simple colour change. Explain each timing value.

05Prompt: expressions and scripts

Most motion tools accept scripts. AI writes them well when you describe the effect precisely.

Example

In {{tool and version}}, write an expression for a text layer that types itself on one character at a time over 2 seconds starting at the layer's in-point, with a blinking cursor that blinks every 0.5s and disappears 1 second after typing ends. Add comments, and list any tool settings I need to change for it to work.

06Prompt: character animation brief

For generated character motion, describe the performance and the timing.

Example

Animate the attached character illustration. Keep the art style, proportions and colours exactly. Performance: she waves twice with her right hand (about 1 second), then tilts her head and smiles (about 1 second), then returns to her starting pose. Smooth, bouncy cartoon timing with slight anticipation before the wave. Static camera, plain background.

07Pitfalls

The best results come from mixing methods: generated motion for organic shots, code for anything precise.

Using video generation for brand motion: logos and text warp. Use code or a motion tool.
Motion sickness: big, fast movement in UI harms some users. Respect reduced-motion settings.
Unknown API versions: scripting APIs change between releases. State the version.
Flattened output: a rendered video can't be retimed. Keep the editable source.

Finished reading?

Mark it complete to track your progress, then test yourself with the Build with AI: Software & Media quiz.

Next: 3D design, text-to-3D and Blender scripting →