Lottie Animations for Web

By Alex Rivera · 1,310 students enrolled ·
4.6 (87)
Lottie Animations for Web preview
  • Lifetime access Learn at your pace
  • Certificate On completion
  • 14-day guarantee Money-back policy

Skills you'll gain

After Effects3D modelingIntermediate

What you'll learn

  • Bodymovin setup
  • Supported vs. unsupported features
  • Shape layer best practices
  • Keeping file size small
  • lottie-web setup
  • React integration (lottie-react)
  • Scroll-triggered playback
  • Interactive animations with markers

Requirements

  • Aimed at a intermediate level
  • Access to After Effects (free tier is fine)
  • Curiosity and a willingness to practice

This course includes

≈ 1 week at 3h/week
  • 3 hours of on-demand video
  • 12 lessons
  • 5 downloadable resources
  • Access on mobile and desktop
  • Full lifetime access
  • Certificate of completion

Earn a certificate

Certificate

of completion

Lottie Animations for Web

Instructor · Alex Rivera

HorizonX

Finish every lesson to earn a shareable certificate of completion — add it to your LinkedIn profile or résumé to showcase your new skills.

Add to your LinkedIn profile

About this course

Learn the complete Lottie workflow — from After Effects composition to optimized JSON running in production. This course covers the Bodymovin plugin, animation constraints for Lottie compatibility, JSON optimization techniques, and implementation in React, vanilla JS, and no-code tools. You'll create 10 production animations: a logo reveal, loading spinner, success/error states, onboarding illustrations, empty states, scroll-triggered sequences, and a complex multi-step tutorial animation. Each animation is optimized to under 15KB and tested across Chrome, Safari, Firefox, and mobile browsers.

Frequently asked questions

Top courses for top people