GSAP vs Lottie: Choosing the Right Animation Tool

GSAP and Lottie are both excellent animation tools, but they solve different problems. Here's how to decide which one to reach for — and when to use both.

The Core Difference

GSAP animates DOM elements you create with code. You define what moves where, and GSAP handles the timing and easing.

Lottie plays back animations created in After Effects (or similar tools). Your designer defines what happens; Lottie renders it exactly as designed.

When to Use GSAP

• UI transitions: page transitions, accordion opens/closes, element reveals
• Scroll-driven animations: parallax, sticky elements, reveal-on-scroll
• Dynamic data visualization: animating charts, counters, progress bars with real values
• Interactive animations: reactions to user input that are hard to pre-define
• When you have no designer: building animations entirely in code

// GSAP example: animate an element based on user interactionimportgsapfrom'gsap';button.addEventListener('click',()=>{gsap.to('.card',{scale:1.05,duration:0.2,ease:'back.out(1.7)',yoyo:true,repeat:1});});

When to Use Lottie

• Brand animations: logos, mascots, illustrations — designed by someone who knows After Effects
• Icon animations: animated checkmarks, loading spinners, hover states
• Onboarding flows: multi-scene character animations
• Empty states / error states: illustrated feedback
• When a designer owns the animation: you want pixel-perfect rendering of their work

// Lottie example: designer-created animation, zero code for the animation itselfimport{DotLottieReact}from'@lottiefiles/dotlottie-react';importsuccessAnimfrom'./success.lottie';// ← designer made this<DotLottieReactsrc={successAnim}autoplayloop={false}/>

File Size Comparison

GSAP has no animation asset file — the animation is in your code. Lottie ships a separate asset file per animation.

Using Both Together

The real power comes from combining them:

// Use GSAP to control WHEN Lottie playsimportgsapfrom'gsap';import{ScrollTrigger}from'gsap/ScrollTrigger';importlottiefrom'lottie-web';constanim=lottie.loadAnimation({container:document.getElementById('hero-lottie'),renderer:'svg',loop:false,autoplay:false,path:'/animations/hero.json',});// Play the Lottie animation when user scrolls to itScrollTrigger.create({trigger:'#hero-lottie',start:'top 80%',onEnter:()=>anim.play(),onLeaveBack:()=>anim.stop(),});

GSAP handles the scroll logic; Lottie renders the designer's work.

Practical Decision Matrix

Preparing Lottie Files

Before integrating any Lottie file, preview it at IconKing — you can check that it renders correctly, edit colors to match your brand, and convert from .json to .lottie (75% smaller). No account required.

Summary

Use GSAP when you're building the animation in code. Use Lottie when a designer made the animation in After Effects. Use both when you need scroll/interaction triggers around designer-made content.