Create animated and interactive experiences using Lottie

Name: Create animated and interactive experiences using Lottie
Author: Samuel Osborne

By Samuel Osborne

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

Chapters

Duration
Lesson 1

Welcome

3

5:36 mins

View more
- Introduction
  
  0:46 mins
- Why use Lottie?
  
  01:17 mins
- Examples of animations and interactions
  
  03:33 mins
Lesson 2

Lottie basics

3

17:10 mins

View more
- The Lottie pipeline
  
  01:00 mins
- The boundaries of Lottie
  
  01:07 mins
- Getting setup for Lottie in After Effects
  
  15:03 mins
Lesson 3

Icon creation

2

7:40 mins

View more
- Illustrator - Best practices for Lottie
  
  03:50 mins
- Illustrator - Creating an icon and preparing for AE
  
  03:50 mins
Lesson 4

Icon animation

2

13:18 mins

View more
- After Effects – Importing our icon and setting up
  
  02:15 mins
- After Effects - Icon animation and exporting for Lottie
  
  11:03 mins
Lesson 5

Integrating into a web project

9

21 mins

View more
- The different possibilities
  
  00:52 mins
- Using Lottie-web
  
  02:34 mins
- Lottie-Interactivity - Animation sync on scroll
  
  03:05 mins
- Lottie-Interactivity - Animation sync with cursor position
  
  04:37 mins
- Using Lottie-Interactive
  
  02:53 mins
- Lottie-Interactive - On-click interaction
  
  01:33 mins
- Lottie-Interactive - On-hover interaction
  
  01:24 mins
- Lottie-Interactive - Morphing + Switch interaction
  
  02:14 mins
- Lottie-Interactive - Play-on-show interaction
  
  02:27 mins
Lesson 6

Conclusion

1

00:20 mins

View more
- Conclusion
  
  00:20 mins

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