StretchLearn Course

Ship animations that weigh kilobytes, not megabytes

After Effects to Bodymovin to a tiny JSON Lottie, optimised, interactive, and hosted on LottieFiles

Beginner9 hr 15 minSelf PacedRegistered

Course Overview

What this course is designed to develop

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.

Learning Outcomes

What the learner should be able to understand, build, or execute.

Explain what a Lottie file is and why a vector JSON animation beats a GIF or video for the web and apps

Animate inside the Bodymovin-supported subset of After Effects so the export actually renders correctly

Export a Lottie JSON with the Bodymovin plugin and read its size, frame rate, and embedded assets

Cut file weight using shape layers, the dotLottie container, and removal of unsupported effects and rasters

Embed and play a Lottie with the lottie-player web component or lottie-web and control loop, speed, and segments

Add interactive triggers, hover, click, scroll, and cursor follow, and host and version animations on LottieFiles

Curriculum Preview

Inside the curriculum: a structured path from fundamentals to execution.

Preview the course structure, see how the modules build on one another, and understand the path this program is designed to take you through.

Module 1

Module 1: What Lottie Is and How the Pipeline Works

The format, the players, and the people: what a Lottie file actually is, why it beats GIF and video, and the After Effects to Bodymovin to web pipeline you will use throughout.

3 lessons

A Lottie Is an Animation Written as DataContent · 45 min

Preview Enabled

The Tools: After Effects, Bodymovin, and a PlayerContent · 45 min

LMS Access

Where Lottie Lives: Web, App, and LottieFilesContent · 45 min

LMS Access

Module 2

Module 2: Animating for a Clean Bodymovin Export

The discipline that makes Lottie work: stay inside the supported After Effects subset, animate on shape layers, and avoid the features Bodymovin silently drops.

3 lessons

Shape Layers Are the Whole GameContent · 45 min

LMS Access

Supported Properties, Trim Paths, and MasksContent · 50 min

LMS Access

Comp Hygiene: Size, Frame Rate, and NamingContent · 45 min

LMS Access

Module 3

Module 3: Exporting and Optimising the File

Running Bodymovin properly, then making the file as small as it can be with dotLottie, the LottieFiles optimiser, and asset discipline, without breaking playback.

3 lessons

Running Bodymovin and Reading the OutputContent · 45 min

LMS Access

dotLottie, Compression, and the LottieFiles OptimiserContent · 50 min

LMS Access

Testing Across Players and BackgroundsContent · 45 min

LMS Access

Module 4

Module 4: Playing, Triggering, and Hosting on the Web

Getting the Lottie onto a real page and making it react: the lottie-player web component, controlling loop and segments, interactivity, and shipping through LottieFiles.

3 lessons

Embedding with the lottie-player Web ComponentContent · 45 min

LMS Access

Interactivity: Hover, Click, Scroll, and SegmentsContent · 50 min

LMS Access

Hosting, Sharing, and Handing Off via LottieFilesContent · 45 min

LMS Access

Built for Application

A complete learning path, not a one-off inspiration hit.

This program is designed around progression: focused lessons, structured modules, applied resources, assessments, and a course rhythm that turns information into usable capability.

LottieAfter EffectsBodymovinLottieFilesdotLottielottie-webweb animationinteractive motion