Lottie Animations That Do Not Slow You Down
Lightweight Lottie animations that add motion and personality to your site without dragging the load time down with them.
Motion Without the Weight
A well-placed animation can make a site feel alive: a loading state that entertains, an icon that responds, an illustration that moves as you scroll. The catch is that clumsy animation bloats a page and undoes all your speed work.
Lottie gives you motion that stays light, and we use it with a bit of discipline.
Let’s Build Something Great Together
A rebrand. A new website. A custom app. A better way to show up online. Whatever's next, let's make sure your digital presence is ready for it.
Lottie animation that stays light on its feet
Animation is easy to overdo and easy to bloat a page with. Done with restraint, it adds life. Done carelessly, it just makes everything load slower.
We create Lottie animations that bring a bit of motion and character to your site, from subtle icon animations to full illustrated sequences. Because Lottie is vector-based and tiny, it looks crisp at any size and barely touches your load time.
The trick is knowing when to use it and when to hold back. We add motion where it earns its place, not just because we can.
People Like You Who Asked Themselves “What IF ?”
"I approached Isaac on behalf of our organisation after we were experiencing bandwith issues that resulted in large bills each month. Isaac quickly identified the problem and sorted it out for us immediately, resulting in our monthly bills being cut in half."
"We were blown away by Isaac and the team who worked on our project. Super responsive, helpful and a tightly run ship, will definitely work with again."
"I've worked with many developers over the years; these guys were one of the easiest and communicated better than anyone I've ever seen."
"They produced A+ outcomes within the timeline and budget agreed upon. I highly recommend them to anyone needing a Webflow build or redesign."
"The team did a great job delivering a great website experience. They are very responsive and great to work with.
"I highly recommend What IF Web to anyone seeking a professional service and a finished product that effectively attracts the right users to your platform."
"I can confidently recommend the What If Web team to any business looking to stand up a modern, great looking and well crafted site."
"I worked with What IF Web to turn my design into reality, and I’m so happy with how it turned out! They really took my ideas and added their own magic."
"Isaac and Tom with What IF Web were phenomenal to work with, point blank. The website they designed, and developed through Webflow was more than I could've imagined."
"They are quick to respond and action work requests to a high standard, creates helpful guides and is extremely professional in all they do."
"Isaac has worked with my team for the last few months and has been dedicated and diligent, even when briefs are light and time is tight!"
"The team and I highly recommend Isaac and the What IF Web team. He is using the absolute top techniques and processes available."
"Great web design and development service - very proactive and always provide really useful input and feedback throughout the whole process."
"They are a really creative and imaginative team, but most importantly, they are a pleasant team to work with."
"The What IF team's dedication and proficiency in utilizing Webflow have truly exceeded our expectations, making them a top choice for website development services."
"What If provided an exceptional development experience. Not only were they transparent about pricing, but they also delivered our website swiftly while maintaining open communication."
"What IF captured what I needed perfectly. Their meticulous attention to detail made everything user-friendly. Their combination of technical prowess and genuine care truly sets them apart."
.webp)
“Isaac and his team have been delivered an outstanding result for us in what was a complex build across multiple platforms. I can't recommend them highly enough.”
"The What IF Web team is awesome. I will be referring them to others who need websites and my company will definitely be using them for all of our website updates."
"Super knowledgeable with great technical skills, but most importantly communicates quickly and thoughtfully, so we get great advice as well as top-notch service."
Why go with What IF Web for Lottie animation
We keep animation light so your speed stays intact, use motion where it actually helps, and know when a still image does the job better.
Frequently Asked Questions
What is a Lottie file and why use it on a website?
A Lottie file is a JSON-based animation format that renders vector animations in a browser at a fraction of the file size of a GIF. They're smooth, scalable, and lightweight, making them well-suited for micro-interactions, product demos, and UI animations on websites. The main trade-off is that they require more care to optimise than a simple image file.
How do I reduce Lottie file size?
Keep your source graphics as vectors rather than raster images, avoid drop shadows and masks, keep the layer structure simple, and export to .Lottie format rather than JSON. The .Lottie format compresses significantly smaller than the standard JSON export. Tools like LottieFiles' converter make this straightforward.
Why does my Lottie animation look different in Safari?
Safari handles certain Lottie features inconsistently, particularly masks and complex blend modes. The safest approach is to avoid masks entirely and use clever layering and opacity changes instead. Testing in Safari during the design phase saves a lot of debugging later.
Should I lazy load Lottie animations?
Yes, especially if the animation is below the fold or the page has multiple animations. Lazy loading means the animation only loads when it's about to enter the viewport, which keeps initial page load fast. Running several Lottie animations simultaneously can noticeably impact performance.
Can I use raster images inside a Lottie animation?
Technically yes, but it's worth avoiding where possible. Raster images baked into a Lottie file increase the file size considerably and can cause rendering issues. If you need a product shot or photograph in an animation, optimise it separately with a tool like TinyPNG and import it as a static element rather than embedding it in the animation itself.
