How To Use Lottie Animations

Growth Services Droplets


How To use lottie Animations
The animated Elementor logo above is done with a new technology called Lottie and if you hover your cursor over the GRO.TEAM logo in the top left of this page or the contact icons at the bottom of the page you might notice some subtle animations. You’ll need to press them if you’re reading this on a phone of course…

A New Approach

recently open sourced by aiRbnb design
Lottie is an iOS, Android and React Native library that renders Adobe After Effects animations in real time. Lottie uses animation data exported as JSON files from an open-source After Effects extension called Bodymovin. The extension is bundled with a JavaScript player that can render the animations on the web. Elementor have have added a Lottie widget to their Elementor Pro product to make the technology available to all WordPress site creators.

Using Elementor's Lottie Widget

Elementot Lottie Widget
Elementor Adding Lottie Options

why use Lottie?

Lottie animations are easier to create and more flexible to use
The use of scalable graphics means that Lottie animations can be used seamlessly in any context and the lightweight lazy-loaded (after the site is interactive) pay load means a Lottie animation doesn’t impair overall user experience….

We Make Growth Hacking Accessible To Everyone​


By forming an onsite or remote virtual team with one of GRO.TEAM’s Growth Experts we can put a rocket under your growth much more quickly and cost effectively than you might imagine.

Our Growth Expert will run virtual daily standups with your cross-functional team and Measure –> Act –> Measure ideas to move the needle for your business. Physical location is no barrier…we have growth hacked “in” 11 countries so far…give us a shout to find out more.


By using scalable graphics and json
Complex scalable animations can be rendered with JSON payloads as low as 30-50KB. They can also be lazy loaded to avoid blocking the rendering of the site/app.


Growth Services


using lottie means no
Bulky image files for each screen size or having to write a thousand lines of brittle, hard-to-maintain code…


No code
By making the use of animation possible without coding the ROI on using animation suddenly looks much better.

Loving Our Videos?!?

how to

interactive experience
A Lottie animation can triggered based on a variety of behaviours that trigger animations, such as viewport, scroll, hover and click…

open source and free

there are plenty of sites now offering free lottie json downloads
LottieFile and useAnimations are excellent libraries of free Lottie animations…

have fun

anything that makes apps and sites more dynamic and interactive has to be a good thing…
Why not try Lottie out and see what you think?

GRO.TEAM Business Growth Agency Services Joined Up

GRO.TEAM Business Growth Agency
GROW Coaching
Business Growth Agency
Bobby Growth Services

Give our friendly team  a shout for a non salesy chat about how we can get stuck into your challenges…asap

You Might Also Like

Share The Love…Tell A Friend About GRO.TEAM And Grab A Cool Goodie Bag Of Branded Stuff When We Start Working With Them!