EQUIPMENT
From editorial series to cinematic brand films, every project here tells a visual story shaped by emotion, aesthetic, and direction.
From editorial series to cinematic brand films, every project here tells a visual story shaped by emotion, aesthetic, and direction.
Motion Design
Two different tools for two different jobs
Lottie is a file format for exporting complex vector animations, typically created in a tool like After Effects, into a lightweight format that can play natively across web and mobile. CSS animation is a native browser capability for animating interface properties directly in code, color changes, transforms, opacity shifts. They are not competing solutions for the same problem, they solve different problems, and picking the wrong one for a given situation creates unnecessary complexity or a worse result.
When Lottie is the right choice
Lottie makes sense for complex illustrated animations, an animated character, an intricate icon sequence, a detailed loading illustration, that would be extremely difficult to recreate with code alone. It is well suited to onboarding illustrations, empty state graphics, and celebratory moments where a designer needs full creative control over a complex visual sequence, exported once and reused consistently across platforms.
When CSS animation is the right choice
CSS animation is the right tool for interface level motion, button states, hover effects, panel transitions, layout shifts, where the animated elements are actual interface components rather than illustrated graphics. It tends to be more performant for these cases since it works directly with the browser’s rendering engine, and it is easier for developers to adjust without needing to re export an animation file from design software.
Performance considerations that often get missed
Lottie files can become large and performance heavy if not optimized properly during export, which matters especially on mobile connections. CSS animations can also cause performance problems if they animate properties that force the browser to recalculate layout repeatedly. Both tools require some technical care during implementation, and neither is automatically fast just because of the format chosen.
Practical example
A wellness app working with Belgana wanted an illustrated breathing exercise animation for their meditation feature, alongside standard interface transitions elsewhere in the app. The illustrated breathing visual was built and exported as an optimized Lottie file for consistent cross platform playback, while all standard interface transitions, tab switches, button presses, used native CSS animation for better performance and easier long term maintenance by the development team.
Frequently asked questions
Is Lottie slower than CSS animation?
It depends on the complexity of the animation and how well the file is optimized. Simple Lottie files can perform well, but very complex ones can be heavier than an equivalent CSS animation.
Can Lottie and CSS animation be used together in the same product?
Yes, and this is actually the most common approach for mature products, using each tool for the type of motion it handles best rather than forcing everything into one format.
Do I need a developer to implement Lottie animations?
Basic Lottie playback can often be implemented with minimal code using existing libraries, but proper integration with app state and performance optimization still benefits from developer involvement.
Explore motion driven projects in our work
More questions about working with Belgana Studios
What motion design services does Belgana Studios offer?
Belgana Studios offers interface motion, brand motion systems, onboarding animation, and launch motion for teams who want their product and brand to move with intention.
What does the Belgana Studios process look like for a motion design project?
Most motion engagements start with defining a motion personality tied to brand or product goals, move into applied animation work, and close with documented patterns the team can reuse.
Does Belgana Studios only work with early stage startups?
No, Belgana Studios works with early stage founders adding motion for the first time as well as scaling teams extending an existing motion system.
How do I start a motion design project with Belgana Studios?
Reach out through the contact page to schedule an initial conversation about your motion design needs.
Two different tools for two different jobs
Lottie is a file format for exporting complex vector animations, typically created in a tool like After Effects, into a lightweight format that can play natively across web and mobile. CSS animation is a native browser capability for animating interface properties directly in code, color changes, transforms, opacity shifts. They are not competing solutions for the same problem, they solve different problems, and picking the wrong one for a given situation creates unnecessary complexity or a worse result.
When Lottie is the right choice
Lottie makes sense for complex illustrated animations, an animated character, an intricate icon sequence, a detailed loading illustration, that would be extremely difficult to recreate with code alone. It is well suited to onboarding illustrations, empty state graphics, and celebratory moments where a designer needs full creative control over a complex visual sequence, exported once and reused consistently across platforms.
When CSS animation is the right choice
CSS animation is the right tool for interface level motion, button states, hover effects, panel transitions, layout shifts, where the animated elements are actual interface components rather than illustrated graphics. It tends to be more performant for these cases since it works directly with the browser’s rendering engine, and it is easier for developers to adjust without needing to re export an animation file from design software.
Performance considerations that often get missed
Lottie files can become large and performance heavy if not optimized properly during export, which matters especially on mobile connections. CSS animations can also cause performance problems if they animate properties that force the browser to recalculate layout repeatedly. Both tools require some technical care during implementation, and neither is automatically fast just because of the format chosen.
Practical example
A wellness app working with Belgana wanted an illustrated breathing exercise animation for their meditation feature, alongside standard interface transitions elsewhere in the app. The illustrated breathing visual was built and exported as an optimized Lottie file for consistent cross platform playback, while all standard interface transitions, tab switches, button presses, used native CSS animation for better performance and easier long term maintenance by the development team.
Frequently asked questions
Is Lottie slower than CSS animation?
It depends on the complexity of the animation and how well the file is optimized. Simple Lottie files can perform well, but very complex ones can be heavier than an equivalent CSS animation.
Can Lottie and CSS animation be used together in the same product?
Yes, and this is actually the most common approach for mature products, using each tool for the type of motion it handles best rather than forcing everything into one format.
Do I need a developer to implement Lottie animations?
Basic Lottie playback can often be implemented with minimal code using existing libraries, but proper integration with app state and performance optimization still benefits from developer involvement.
Explore motion driven projects in our work
More questions about working with Belgana Studios
What motion design services does Belgana Studios offer?
Belgana Studios offers interface motion, brand motion systems, onboarding animation, and launch motion for teams who want their product and brand to move with intention.
What does the Belgana Studios process look like for a motion design project?
Most motion engagements start with defining a motion personality tied to brand or product goals, move into applied animation work, and close with documented patterns the team can reuse.
Does Belgana Studios only work with early stage startups?
No, Belgana Studios works with early stage founders adding motion for the first time as well as scaling teams extending an existing motion system.
How do I start a motion design project with Belgana Studios?
Reach out through the contact page to schedule an initial conversation about your motion design needs.
(Explore Blogs)
