︎
︎Back DMD 2
Spring 2024 ︎︎︎ Purchase College, SUNY ︎︎︎DES2460

Knitting Circle: Lottie

(The After Effects to web pipeline)

Background

Today, we’ll look at a resource called Lottie. Lottie is a plugin that allows you to export your After Effects animations to a format called JSON. This allows you to then play them back on your website. This will allow you to integrate them more fully into your website (ie not simply as a video/embedded with and around text for example), as well as have a format that is lightweight and not dependent on arcane things like file codecs. 

Nerd alert

By nerd here I mean someone concerned with technical correctness. We have to make a few very clear distinctions. 

  • “Lottie” is the plugin which you install in After Effects
  • “Lottiefiles” is the website you need to log into and can view the works of other creators
  • JSON is “JavaScript Object Notation” you don’t need to be able to write in this language, it is just a way to “hold” our animation as code. 

What you’ll need to do

(sorry this isn’t cute please follow along with the resources to see more of what they look like)

    • Install the plugin
      You’ll need to do this on your own computer as you need to download something that AE installs, I’m not sure if the school computers have permissions for it. To install Lottie go over here and use Adobe Exchange it will open the Creative Cloud app and walk you through it.

    • Create a Lottie account
      When you reopen AE, you’ll have the option to go to Window ︎︎︎Extensions and Lottie should be there, it will either ask you to create an account or open a browser to do so.

    • Create your animation
      • I recommend doing this with shape layers as it seems this is what it was “intended” for, but you do have the option to export with linked resources if you are animating an image. 

    • Export your animation (as JSON)
      • This is not with media encoder but with the plugin. You may need to give the website permissions or create a “project” on your account. 

    • Upload the JSON to your website
      • Simply take the JSON file and upload it as you would an image to your repl.it

    • Place the code on your website 
      You’ll need to create a lottie player element, and link the script from lottie. See the replit for the exact code. 

Resources