Implementing Lottie Animations: From Ideas to Ready Solutions

Typical situation: a client asks for a "beautiful loading animation", but the prepared GIF weighs 800 KB, looks blurry on Retina, and doesn't support transparency. Lottie solves these problems. It is a JSON format for vector animations exported from After Effects via the Bodymovin plugin. It renders via JavaScript or native renderers, maintaining quality at any DPI and taking up to 10 times less space than GIF. Over 5+ years, we have implemented more than 50 Lottie integrations – from simple icons to complex scenes with API control. We offer a ready-made turnkey integration with Core Web Vitals optimization and behavior customization. For example, a loading animation in .lottie format weighs only 18 KB versus 500 KB in GIF – saving up to 90% traffic. One client saved 5000 rubles per month on hosting after switching from GIF to Lottie. On average, clients reduce their animation budget by 40%.

What Problems We Solve

• Heavy animations worsen LCP and CLS. Lottie animation weighs 10 times less than GIF and renders hardware-accelerated on any device. Using the .lottie format, we reduce LCP by 20% and save up to 70% traffic.
• Lack of interactivity – we add playback control, speed, scroll or hover binding. For example, an icon animation on hover plays once using playSegments.
• Poor mobile support – Lottie renders hardware-accelerated without quality loss. This is especially important for clients with older smartphones.
• Complex integration – we configure the player, caching, and lazy loading to avoid blocking the main thread. All components are covered with TypeScript types.

Why Lottie Animations Are Better Than GIF?

GIF is limited to 256 colors, doesn't scale, and is heavy. Lottie is a vector format that supports transparency, interactivity, and hardware acceleration. For example, a loading animation in GIF weighs 500 KB, while in Lottie it's 50 KB (JSON) or 18 KB (.lottie). This reduces LCP by 20% and improves Core Web Vitals. Unlike GIF, Lottie can be scaled without loss and controlled programmatically. Moreover, .lottie loads 80% faster than JSON.

Which Library to Choose: dotLottie or lottie-react?

For new projects, we recommend dotlottie-react (60 KB gzip) with the .lottie format. It is lighter, loads faster, and supports modern features: progressive loading, segmented animations. For backward compatibility or working with existing JSON animations, use lottie-react (180 KB gzip). Below is a comparison table.

How We Do It: Stack and Case Study

We use React + TypeScript, the library @lottiefiles/dotlottie-react (60 KB gzip). For legacy projects – lottie-react (180 KB gzip). Format choice: .lottie (binary, 10x lighter than JSON) for new projects, JSON for backward compatibility.

Case study: a client wanted a loader for an SPA on Next.js. We built a component with Suspense: the animation appears while data loads and disappears after completion. Loader code:

// components/PageLoader.tsx import { DotLottieReact } from '@lottiefiles/dotlottie-react' export function PageLoader() { return ( <div className="fixed inset-0 flex items-center justify-center bg-white z-50"> <DotLottieReact src="/animations/loader.lottie" loop autoplay style={{ width: 120, height: 120 }} /> </div> ) } 

This code loads the animation only when the component renders, without blocking main content. As a result, LCP dropped from 3.2 to 1.8 seconds. The average cost of developing such animations decreased by 40% thanks to component reuse. By creating interactive icons, we achieve user engagement.

How to Control Lottie Animations?

Control via JavaScript API: play(), pause(), stop(), setSpeed(), seekTo(). In React, use the dotLottieRefCallback hook to get the player instance. For example, to play animation on hover:

const dotLottieRefCallback = (dotLottie: any) => { // call on onMouseEnter dotLottie.stop() dotLottie.play() } 

You can bind animation to scroll progress using the scroll event and seek() method. This enables parallax effects based on Lottie.

Format Comparison: JSON vs .lottie

Process of Work

1. Analytics – discuss animations, their types and behavior (cyclic, on hover, on scroll).
2. Design – choose format, renderer, component architecture (one common or multiple specialized).
3. Implementation – write component, configure control (play/pause/seek), add caching and preloading.
4. Testing – test on mobile, tablet, desktop; measure LCP/CLS with Lighthouse.
5. Deployment – connect via npm, optimize bundle (code-splitting), set up lazy load via IntersectionObserver.

Typical Mistakes When Integrating Lottie

• Ignoring size – large JSON (500+ KB) increases LCP. Use .lottie or trim extra frames.
• No lazy loading – animation loads immediately, blocking content. Connect via IntersectionObserver.
• No fallback – old browsers don't support WebGL. We check and show a static image.
• Excessive players – one player instance per page can play multiple animations in sequence, saving memory.

What Is Included in Our Work

• Ready React component with TypeScript types.
• Support for .json and .lottie formats.
• Caching and preloading animations.
• Adaptive size to container.
• Documentation on usage and customization.
• Post-deployment support (1 month).

Get a consultation on integrating Lottie animations into your site. We will assess the project for free and offer the best solution. Order integration and improve user experience. Guarantee compatibility with all modern browsers.

Source: LottieFiles official documentation