All courses / Motion graphics in After Effects
The animation looked perfect in After Effects and arrived in the browser as a white box
Lottie is how animation gets into an app, to live streaming, or a web page without shipping video: vector, tiny, sharp at any size, and controllable from code. It is also unforgiving, because most of what After Effects can do simply does not survive the export.
Two days on the whole path from artwork to a tested Lottie file — and, more usefully, on knowing in advance which parts of your design will make it through.
- Length2 days
- FormatOn site or online
- LanguageNorwegian or English
- CategoryMotion graphics in After Effects
After the course you can
Lottie animation for apps, streaming and web
- Build an animation in After Effects that exports cleanly to Lottie
- Know before you start which effects and layer types will survive
- Export with Bodymovin or LottieFiles and test the result properly
- Hand a developer a file with the documentation they need
- Diagnose a Lottie that renders wrong instead of guessing
- A Claude skill for converting existing animations to Lottie
What we cover
The program
What Lottie is
- How a Lottie file actually works, and why it is so small
- Where it beats video, and the cases where video is still the right answer
- How the file is used in an app, on a web page and in live streaming
Building for export
- Shape layers, and why almost everything has to become one
- Importing and preparing vector artwork from Illustrator
- Text: the trap, and the two ways around it
- Masks, mattes and the ones that do not translate
- Keeping the file small enough to load instantly
What does not survive
- The effects that are silently dropped
- Expressions: what gets baked, what breaks
- Blending modes, 3D layers, and the rest of the list
- How to check before you have built the whole thing
Exporting and testing
- Bodymovin and the LottieFiles plugin
- Previewing the real file, not the After Effects render
- Testing across browsers and on a phone
- Versioning and handing over to a developer
- Using AI to convert existing templates to Lottie
The honest bit
There's a lot that Lottie simply cannot do. Time spent learning the constraints up front saves a day of building something beautiful that arrives in the browser as a white rectangle.
Who it is for
Motion designers, graphic designers and content producers who deliver animation to developers for apps, live streaming, or web, or who want to stop delivering video where a Lottie would be better.
Prerequisites
Working knowledge of After Effects. No web development experience needed, though you will end the course able to talk to your developers precisely.
Bring
Bring an animation you have delivered as video, and the design files behind it. Converting a real one is the exercise.
Open courses
Prefer a fixed date for one person?
Also runs as an open course at Qross Kurssenter — classroom in Oslo and live online on the same dates.
Questions
About this course
Do we need developers involved?
Not for the course. But you may need to talk to them afterwards about how you'll deploy the animations in your web pages, apps, or live streaming services.
Can we convert our existing animations?
Some of them. Bring them and we will go through which are viable, which need rebuilding and which should stay as video — that assessment is a useful outcome in itself.
Is this the same as the CuttingRoom or broadcast graphics workflow?
If you need Lottie for a specific broadcast graphics system rather than for web, say so when you book and the emphasis shifts accordingly.
Related courses
Related courses
2 daysAdobe After Effects — beginners
After Effects has a reputation for a steep learning curve, and it deserves it.
2 daysAdobe After Effects — advanced
You know After Effects.
2 daysAdobe After Effects Expressions
Expressions are code, which sounds worse than it is, because you almost never write it.
Want this for your team?
Tell me what goes wrong today and you get a written plan and a price back. Two sentences is enough.