Adding PNG's and PNG Sequences to Lotties

Effortlessly add images to your Lottie animations in a few quick steps

READ ON!

Adding PNG's and PNG Sequences to Lotties

Lotties are lightweight, scalable animations that can be manipulated to create interactive and engaging visuals for websites and apps. While Lotties are typically created from vectors, images can easily be added as part of the composition with a simple tweak to the settings. Keep reading to learn how to export a Lottie in Adobe After Effects with image files.

Adding a PNG

> Import your PNG file into the composition and animate however you desire (or leave static, ex. a background image)

>To import a PNG sequence, select all the photos in the sequence and import with the settings below:

> When you are ready to render your Lottie file, select Windows > Extensions > Bodymovin (install here if you haven't already)

> Select the composition and click Settings (gear icon). Scroll down and select Assets > 'include in JSON'

Incorporating images with the lightweight, customizable power of Lotties, opens up unlimited possibilities for effortless interactions. Check back for some ways we incorporate Lotties in our designs to create unique and engaging user experiences across web and mobile.