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
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 1Welcome
-
Introduction
-
Why use Lottie?
-
Examples of animations and interactions
-
-
Lesson 2Lottie basics
-
The Lottie pipeline
-
The boundaries of Lottie
-
Getting setup for Lottie in After Effects
-
-
Lesson 3Icon creation
-
Illustrator - Best practices for Lottie
-
Illustrator - Creating an icon and preparing for AE
-
-
Lesson 4Icon animation
-
After Effects – Importing our icon and setting up
-
After Effects - Icon animation and exporting for Lottie
-
-
Lesson 5Integrating 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 6Conclusion
-
Conclusion
-
Meet the teacher
Samuel Osborne
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.
Course Content
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.
Features
- English
- English, Spanish, French, Italian, Portuguese (Machine translation)
- Intermediate & professional level
- Access on mobile and Desktop
- Full time access
- Certificate of completion
-
Samuel Osborne
Teacher at awwwards.com
If you have any questions about this course, please contact us
