Creative Days 75% off
Special offer Create animated and interactive experiences using Lottie By Samuel Osborne
Creative Days!
$100 $25
Buy
Create animated and interactive experiences using Lottie
English English, Spanish, French (+2) [Machine translation]
1 hour 5 minutes Course

Create animated and interactive experiences using Lottie

Watch Trailer
Creative Days!     $100 $25
Buy course

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.

The subtitles are automatically generated, so the quality of the captions may vary.
Course Table of contents
What will you learn?

6 sections • 20 lectures • 1 hour 5 minutes

  • Welcome
    3 lectures 5:36 mins
    • Introduction
      0:46 mins
    • Why use Lottie?
      01:17 mins
    • Examples of animations and interactions
      03:33 mins
  • Lottie basics
    3 lectures 17:10 mins
    • The Lottie pipeline
      01:00 mins
    • The boundaries of Lottie
      01:07 mins
    • Getting setup for Lottie in After Effects
      15:03 mins
  • Icon creation
    2 lectures 7:40 mins
    • Illustrator - Best practices for Lottie
      03:50 mins
    • Illustrator - Creating an icon and preparing for AE
      03:50 mins
  • Icon animation
    2 lectures 13:18 mins
    • After Effects – Importing our icon and setting up
      02:15 mins
    • After Effects - Icon animation and exporting for Lottie
      11:03 mins
  • Integrating into a web project
    9 lectures 21 mins
    • 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
  • Conclusion
    1 lectures 00:20 mins
    • Conclusion
      00:20 mins
Course details

Create animated and interactive experiences using Lottie

Create animated and interactive experiences using Lottie

By Samuel Osborne

$25 75% off $100

Creative Days

  • English
  • English, Spanish, French, Italian, Portuguese (Machine translation)
  • Intermediate & professional level
  • Access on mobile and Desktop
  • Full time access
  • Certificate of completion
About the Speaker
Learn from the best
  • Samuel Osborne

    Samuel Osborne

    Full stack developer & Lottie animator at SVGenius

    @SVGeniusdotCO

    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.

    svgenius.co

Similar Courses