Growth Services Droplets

LOTTIE

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….

Quicker

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.

making
Ux
better

Growth Services

better

using lottie means no

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

cheaper

No code

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

Choose
how to
trigger
it

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
Josh
Loana
Bobby Growth Services

Talk TO A HUMAN

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