New season, New skills! All Courses at $9.99

Create animated and interactive experiences using Lottie

  • Language: English
  • Certificate: of completion
  • Subtitles: English, Spanish, French, Italian, Portuguese (Machine translation)
  • Duration: 1 hour 5 minutes
Now
9.99$
/$100

Motion and interactivity are becoming key elements for creating exciting, dynamic and captivating digital experiences. Lottie is lowering the barrier of entry for animated and interactive interfaces and is quickly becoming the industry standard tool.

Category Course format Language Duration Level
Motion, Animation Online English with Subt. 1 hour 5 minutes Intermediate & professional level

In this course you will learn how to bring life to your web page and make it interactive. We will cover how to create, animate and export animations specifically for Lottie using Illustrator and After Effects. You will also learn how to integrate them on to the web and add interactions such as on-click, hover, morphing and more.

By the end of this class, you will have all the tools necessary for creating animated and interactive digital experiences.

Modules

What you will learn
in this course.

  • Lessons
  • Lesson 1
    Welcome
    • Introduction
    • Why use Lottie?
    • Examples of animations and interactions
  • Lesson 2
    Lottie basics
    • The Lottie pipeline
    • The boundaries of Lottie
    • Getting setup for Lottie in After Effects
  • Lesson 3
    Icon creation
    • Illustrator - Best practices for Lottie
    • Illustrator - Creating an icon and preparing for AE
  • Lesson 4
    Icon animation
    • After Effects – Importing our icon and setting up
    • After Effects - Icon animation and exporting for Lottie
  • Lesson 5
    Integrating into a web project
    • The different possibilities
    • Using Lottie-web
    • Lottie-Interactivity - Animation sync on scroll
    • Lottie-Interactivity - Animation sync with cursor position
    • Using Lottie-Interactive
    • Lottie-Interactive - On-click interaction
    • Lottie-Interactive - On-hover interaction
    • Lottie-Interactive - Morphing + Switch interaction
    • Lottie-Interactive - Play-on-show interaction
  • Lesson 6
    Conclusion
    • Conclusion

Meet the teacher

Samuel Osborne

Full stack developer & Lottie animator at SVGenius

Having just completed a masters degree in information technologies, I currently work as a full stack developer. I use SVGenius to have more creative endeavours and fell in love with Lottie to mix programming, design, and animation. When I’m not working you can find me at the gym or behind my camera.

Now
9.99$
/$100

Course Content

Motion and interactivity are becoming key elements for creating exciting, dynamic and captivating digital experiences. Lottie is lowering the barrier of entry for animated and interactive interfaces and is quickly becoming the industry standard tool.

Features

  • English
  • English, Spanish, French, Italian, Portuguese (Machine translation)
  • Intermediate & professional level
  • Access on mobile and Desktop
  • Full time access
  • Certificate of completion

If you have any questions about this course, please contact us

Start the course and upskill your professional toolkit.

Related courses

Find more courses
like this one.

Currently we have more courses for you View All Courses