By twobirds design
twobirds is a French design studio that helps companies create experiences for their users, from the initial idea to the final product. As a design studio, we wanted to create a memorable website to showcase our work and capabilities to our future clients.
Our main challenge was to integrate our animations while maintaining the visual quality and conserving a fast loading time. There were many ways to do it - Animated SVGs, GIFs, videos, etc. - but each came with its restrictions and limitations. This is where Lottie outperformed! Its vector-based elements render super smooth animations on any platform or device, with any visual degradation.
We are designers at first, not developers. Recreating an animation in JS or any language was not even an option for us. But thanks to LottieFiles, we could generate a super light JSON file straight out from Adobe After Effects to integrate.
We’ve been using tools like Lottie Preview, Lottie Editor, and Bodymovin to smooth out our workflow. They’ve been super helpful to experiment and troubleshoot our work quickly and easily before pushing it to our website.
Animation plays a big part in the user experience to either explain something or make it more engaging. It’s also a way to make your brand come to life and help connect to your user and, more specifically, in our case, convert people visiting our website to potential future clients. So far, the outcome is way ahead of our expectations, and the feedback we got is all unanimous! So for all of that and the future, thanks LottieFiles!
Business impacts: what do you believe you would be able to achieve with having Lottie animations?
We try as much as possible to upsell our clients by implementing cute tailored animations to their websites/apps, and since performance is always a big concern for consumer-facing products, using Lottie sure helps us sell these animations.
Advice to others: your advice to others if they would like to implement Lottie animations.
Like any creative tool, Lottie does have a few restrictions. If you want to know more about it, have a look here.
Our recommendation will be to play around with it and, most importantly, have fun! There's always a way around achieving your vision.
The key knowledge we can share with you is to keep your AE file as organized as possible and simplify the number of objects or layers you have in it as much as you can. If you follow those simple steps, your render will literally be generated in a few seconds, and the weight of your output file will be light as one of our feathers ;)