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.
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.
Course Table of contents
What will you learn?
6 sections • 20 lectures • 1 hour 5 minutes
-
Welcome3 lectures 5:36 mins
-
Introduction0:46 mins
-
Why use Lottie?01:17 mins
-
Examples of animations and interactions03:33 mins
-
-
Lottie basics3 lectures 17:10 mins
-
The Lottie pipeline01:00 mins
-
The boundaries of Lottie01:07 mins
-
Getting setup for Lottie in After Effects15:03 mins
-
-
Icon creation2 lectures 7:40 mins
-
Illustrator - Best practices for Lottie03:50 mins
-
Illustrator - Creating an icon and preparing for AE03:50 mins
-
-
Icon animation2 lectures 13:18 mins
-
After Effects – Importing our icon and setting up02:15 mins
-
After Effects - Icon animation and exporting for Lottie11:03 mins
-
-
Integrating into a web project9 lectures 21 mins
-
The different possibilities00:52 mins
-
Using Lottie-web02:34 mins
-
Lottie-Interactivity - Animation sync on scroll03:05 mins
-
Lottie-Interactivity - Animation sync with cursor position04:37 mins
-
Using Lottie-Interactive02:53 mins
-
Lottie-Interactive - On-click interaction01:33 mins
-
Lottie-Interactive - On-hover interaction01:24 mins
-
Lottie-Interactive - Morphing + Switch interaction02:14 mins
-
Lottie-Interactive - Play-on-show interaction02:27 mins
-
-
Conclusion1 lectures 00:20 mins
-
Conclusion00:20 mins
-
