How to work image sequence in Lottie (Easy)
Hello, Coder who loving animation
Today, I going to share A Step by step how to make sequences in After Effects and how to work images sequences with Lottie. so let’s jump below.
as you know, Lottie is a legend for a lot of platforms such as web, android, ios… but Some After Effects tools are very limited in Lottie.
now the first scenario, We want a 2d animation in After Effects but unfortunately I tell you, an Effect, some text animation options, puppet tools, etc. doesn’t work clearly.
the second scenario, We have an animated 3D render. We want to show 3D Animation as image sequences in Android or another platform that support Lottie. of course maybe, first of all, we want to try directly with a while loop. You can see the performance of the application is terrible and move so slowly. that’s normal.
These situations are a gray area. but Lottie is still a legend. anyway, We have to use image sequences to continue the job but don't forget if you do this, the image won't become scalable like a vector, We can begin to explain step by step now.
Step 0 / Work
I won’t explain how to make an animation. but I used After Effects for the animation and puppet tools and some expression has been used.
Step 1 / Export the Animation
Everything okay. We have done an animation. Render the animation now.
- Composition → Add to Render Queue (hotkey CTRL+M)
- Click “Output module” of Queue
- Click The format in opening panel → select PNG Sequence
- Select to path from “Output to”
if you want to do this chapter with watching the video https://youtu.be/bLeJrGsRN3E
Step 2 / Create Composition
- Click Create a new Composition bottom of the project
- the “Duration” in the panel that is opening is important. Set to how many frames do you need.
- Double click some empty area inside the panel of Project
Step 3 / Import the exported animation
- Select to all of them and Click the import button (Attention/ Png Sequence must uncheck)
- You can see all of them inside the project panel line by line
Step 4 / Add Image sequence to Composition
- Select from the last frame to the first frame
- Image Sequence Drag and drop inside the opened composition
Step 5 / Sort the Images
- Select all images.
- Right-click → Keyframe Assistant → Sequence Layers…
- Click okay in the opened panel
- Make sure, Duration finish point is equal to the last frame
when you play, if the animation is reverse. Go to Step 4
Step 6 / Bodymovin
- Open the Bodymovin
- Click setting of the composition.
- Click Assets → Include in json
- Set to destination
- And Click the render button
Congrats. you have exported data.json
