Awarded Lottie Certified Expert: Exploring the Possibilities and Practical Applications of Interactive Animation
- Apr 4
- 7 min read
Updated: 7 days ago
On April 3, 2026, I successfully passed the Lottie Certified Expert review and became a Lottie Certified Creator! ✨
In this article, I’ll share my experience taking the Lottie Creator Certification course, along with the animation I submitted for the certification review.
What is Lottie Animation?
Lottie animation is a JSON-based animation file format developed by engineers at Airbnb.
Traditionally, animations and motion graphics were created using tools like After Effects and exported as MP4 or GIF files.
However, these formats often resulted in large file sizes, making them difficult to implement on websites. In addition, GIFs tend to lose quality and appear pixelated.
With Lottie, animations can be exported as JSON files, making them significantly lighter compared to traditional MP4 or GIF formats.
Because Lottie uses vector-based graphics, animations can be scaled freely without losing quality, allowing for smooth and flexible implementation across different screen sizes.
When exported as a GIF, this animation was 2MB. However, exporting it as a Lottie JSON file reduces the size to 500KB, and with the latest dotLottie format, it can be compressed down to just 26KB!!!
I usually create interactive animations using Rive in my work, but earlier this year I subscribed to Lottie’s paid plan and started using animation assets from the Lottie Premium library.
🔗Lottie Plans and Fees
I typically handle animation adjustments and interaction setup in Rive.
Since Rive and Lottie are compatible, I often download effect-based animation assets such as sparkles or smoke from Lottie in JSON format, import them into Rive, and implement them within my projects.
This workflow has gradually become a standard part of my production process.
Converting After Effects Animations to Lottie
As I mentioned in a previous article, it is also possible to convert animations created in After Effects into Lottie files using a plugin.
By using Lottie, loop animations created in After Effects can be easily implemented in platforms like Wix Studio.
What is the Lottie Creator Certification Course?
Lottie offers a wide range of online learning courses that are available for free.
On March 26 this year, I was informed by a member of the Lottie community that a new course, “Lottie Creator Certification,” had been released.
This inspired me to challenge myself to create interactive animations using only Lottie, and I decided to enroll in the course. The course covers a wide range of topics, including:
”You’ll go from creating animations to building state machines, binding animations with real data using motion tokens, and learning how to properly hand them off to developers.”
It provides a comprehensive learning experience using Lottie Creator (Lottie’s browser-based animation tool ), along with key concepts such as state machines, motion tokens, and AI-powered features like Motion Copilot.
I found it to be a well-structured course, especially suitable for those who are new to creating animations with Lottie.
Course Structure and Learning Experience
The course consists of 12 lessons and takes approximately 45 minutes to complete.
Each lesson is designed as microlearning, with a duration of around 5 minutes or less.
This makes it flexible to either complete the course intensively over a weekend or progress steadily by taking 2 to 3 lessons per day.
Here is one of the animations I created during the course 👇ちら👇
I also learned about the built-in plugin in the Lottie editor, the Physics Simulator, which enables physics-based animations.
Animations that simulate real-world physics can be quite challenging to create from scratch, so I found this feature really useful and fun to explore.
How Long Did It Take to Complete the Course?
Although the course is designed to take around 45 minutes, it took me approximately 10 to 15 hours to complete.
This was mainly because I spent additional time refining the animations created during the lessons, as well as working on the final original animation required for submission.
I progressed through the course section by section.
On the first day, I completed the first two sections, then after a few days, I finished the remaining sections in one go.
Over the weekend, I focused on creating my final project for the certification review.
Some lessons briefly introduced graphic design preparation with fast-forwarded explanations, so I found it more efficient to source similar graphic assets from stock websites and continue working alongside the lessons.
Lottie Animation and Motion Tokens
As introduced in the later part of the course, Lottie announced a new feature called Motion Tokens in March this year.
Motion Tokens : Lottie Files Website https://lottiefiles.com/motion-tokens
With Motion Tokens, animation properties such as size, opacity, and color can be defined as tokens, allowing them to be managed and updated through development environments using JavaScript.
This eliminates the need to return to the animation editor every time you want to adjust values or colors, making it much easier to create controllable and scalable interactive animations.
Lottie supports not only websites but also iOS and Android applications, enabling use cases such as animations that reflect real-time data, for example, weather information powered by APIs.
This kind of animation production, designed with implementation in mind and integrated with development environments, is not possible with After Effects alone.
Being able to manage animations, variables, and team reviews all in one place using Lottie Creator is something I found extremely convenient.
Final Project: Creating an Animation for the Lottie Certified Expert Review
In the final lesson, you are required to create and submit an original interactive animation as your final project.
By publishing and submitting your animation, you can apply for the Lottie Certified Expert review and selection process.
Requirements to Pass the Lottie Certified Expert Review
To qualify as a Lottie Certified Expert, your submitted animation must meet all of the following criteria:
①Interactivity — State Machines
At least one fully built state machine
A minimum of two interactive states excluding the default state (e.g. idle → hover, inactive → active, closed → open)
Clear triggers such as hover or click
Smooth animated transitions between states
The interaction must feel intentional and meaningful — not decorative.
②Animation Quality
Clear timing and easing control
Intentional motion arcs and spatial transitions
Proper layer organization and name
No abrupt or broken transitions
Logical flow between states
Minimum expectation: this should look production-ready.
Once you create an animation that meets all the requirements, publish it on LottieFiles in the specified format and submit it through the review form, your final submission and application will be complete.
Challenges I Faced During the Final Project
One of the biggest challenges I faced in this final project was meeting the requirement of creating something that feels “production-ready,” as well as setting up Motion Tokens in a way that could be properly previewed and demonstrated.
LottieFiles offers many loop-based animation assets, but for this project, I wanted to create an interactive animation that could realistically be used in a real product.
I decided to design a concept for a digital menu where users can customize and order their own onigiri (japanese rice ball).
The idea was inspired by a recent experience I had ordering from a digital menu at a McDonald’s store.😂
Here is the animation I submitted:
You can remix my file from here👇 https://lottiefiles.com/free-animation/make-your-onigiri-7BKoP9zKVr To ensure smooth transitions throughout the entire experience, I designed the animation as a loop while extending the timeline slightly, allowing me to fully utilize Motion Tokens and state machines learned in the course.
By assigning numerical values within the state machine, the interaction updates based on the number of clicks (i.e., variable values), changing the onigiri fillings and toppings accordingly.
Scalable Animations with Motion Tokens for Developer Collaboration
Using Motion Tokens in Lottie, I designed the animation to be flexible and extensible, with implementation in development environments in mind.
The base of the onigiri changes dynamically through Motion Tokens, with variations such as plain rice, grilled onigiri, and ketchup rice.
Since I don’t have a programming background, I initially struggled to understand how to preview Motion Tokens, especially as I wasn’t familiar with the implementation methods using CodePen or JavaScript introduced in the tutorial.
Although this may not have been clearly mentioned in the lessons, I eventually discovered that there is a “Motion Tokens” toggle in the Lottie preview panel👀!
By turning this on, I was able to preview and edit Motion Tokens directly within the Lottie file.
In the Lottie Creator editor, Motion Tokens are displayed in a table format like this, which makes them easy to use once you get familiar with the interface.
The structured view also makes it easier to manage and review them at a glance.
From Submission to Passing the Lottie Certified Expert Review
The course mentioned that the Lottie team would review submissions and provide results within approximately three business days.
However, in my case, I received the acceptance email within just a few hours after submitting my project.
The email included certification assets such as an animation and a static image featuring my registered creator name.
The Lottie Certified Expert Creator badge was also added to my Lottie profile.
Although I encountered some challenges along the way, such as issues with text not displaying correctly and difficulty figuring out how to preview Motion Tokens, I’m relieved that I was able to meet the “production-ready” quality standard and successfully pass the review.
Will Interactive Animation Become the Standard?
With tools like Lottie Creator, Rive, and Spline, the demand for interactive animation—where animations respond to user input and behavior—has been rapidly growing in recent years.
By incorporating rich interactive animations into websites and applications, it becomes possible to create engaging, hands-on experiences and deliver more intuitive and enjoyable user interactions.
To achieve this, it’s not enough to have animation skills alone.
It also requires a data-driven approach to animation design, with implementation in mind and close collaboration with developers.
New tools and features continue to emerge at an incredible pace, and it’s exciting to see how quickly the technology is evolving.
I aim to keep expanding my current skill set and continue delivering better design experiences.
At LITTLE FUJI, I will continue to explore a wide range of creative possibilities, leveraging a flexible mindset and a willingness to take on new challenges!
Create Lightweight Interactive Animations with Lottie👇
At LITTLE FUJI Design Studio, we offer interactive animation services using Lottie and Rive, as well as Wix website design.
As a New Zealand–based bilingual designer, I support clients globally in both English and Japanese.
Feel free to get in touch via the contact page ✉️
Comments