Motion & Interactive Design

Lottie Animations

Ship animations that weigh kilobytes, not megabytes

12 lessons4 modules9h 15m durationbeginner level

Instructor: StretchLearn Faculty

About this course

This hands-on course teaches Lottie, the open format that turns an After Effects animation into a small, resolution-independent JSON file that plays on any screen. You will animate inside the strict subset of After Effects that Bodymovin actually supports, export and inspect a real Lottie file, cut its weight with shape-only layers, the dotLottie container, and asset cleanup, then embed it with lottie-web or the lottie-player web component and wire up hover, click, scroll, and segment triggers. You finish able to deliver a production-ready Lottie that loads in kilobytes, scales without blurring, and reacts to the user, distributed and version-managed through LottieFiles.

Curriculum

Module 1: What Lottie Is and How the Pipeline Works3 lessons

A Lottie Is an Animation Written as DataPreview45m
The Tools: After Effects, Bodymovin, and a Player🔒45m
Where Lottie Lives: Web, App, and LottieFiles🔒45m

Module 2: Animating for a Clean Bodymovin Export3 lessons

Shape Layers Are the Whole Game🔒45m
Supported Properties, Trim Paths, and Masks🔒50m
Comp Hygiene: Size, Frame Rate, and Naming🔒45m

Module 3: Exporting and Optimising the File3 lessons

Running Bodymovin and Reading the Output🔒45m
dotLottie, Compression, and the LottieFiles Optimiser🔒50m
Testing Across Players and Backgrounds🔒45m

Module 4: Playing, Triggering, and Hosting on the Web3 lessons

Embedding with the lottie-player Web Component🔒45m
Interactivity: Hover, Click, Scroll, and Segments🔒50m
Hosting, Sharing, and Handing Off via LottieFiles🔒45m