Skip to content
Learni
View all tutorials
Développement Frontend

How to Master Advanced GSAP Animations in 2026

18 minINTERMEDIATE
ReactJavaScriptAnimationsGSAP
Lire en français

Introduction

GSAP is the go-to library for creating performant and fluid web animations. Unlike limited CSS transitions, GSAP provides precise control over timelines, complex sequences, and scroll-based interactions. In 2026, its use with modern frameworks like React enables exceptional user experiences while maintaining excellent performance. This intermediate tutorial guides you step by step from solid foundations to advanced implementations.

Prerequisites

  • Solid knowledge of modern JavaScript
  • Node.js 18+ and npm
  • Basic understanding of React (optional but recommended)
  • Code editor (VS Code)

Installing GSAP

terminal
npm create next-app@latest gsap-project --yes
cd gsap-project
npm install gsap

We initialize a Next.js project and install the GSAP library via npm to take advantage of the latest features and plugins.

Project Setup

After installation, import GSAP into your components. GSAP integrates seamlessly with React thanks to its simple and performant API.

Simple Animation with GSAP

components/SimpleAnimation.tsx
'use client';
import { useEffect } from 'react';
import { gsap } from 'gsap';

export default function SimpleAnimation() {
  useEffect(() => {
    gsap.to('.box', {
      duration: 1.5,
      x: 300,
      rotation: 360,
      ease: 'power2.inOut',
      repeat: -1,
      yoyo: true
    });
  }, []);
  return <div className="box w-20 h-20 bg-blue-500 rounded"></div>;
}

This React component triggers a basic GSAP animation on an element. Using useEffect ensures the animation runs after the DOM has mounted.

Creating a Timeline

components/TimelineAnimation.tsx
'use client';
import { useEffect } from 'react';
import { gsap } from 'gsap';

export default function TimelineAnimation() {
  useEffect(() => {
    const tl = gsap.timeline({ repeat: -1, yoyo: true });
    tl.to('.box1', { x: 200, duration: 1 })
      .to('.box2', { y: 100, duration: 0.8 }, '-=0.5')
      .to('.box1', { rotation: 180, duration: 1 });
  }, []);
  return (
    <>
      <div className="box1 w-16 h-16 bg-red-500"></div>
      <div className="box2 w-16 h-16 bg-green-500 mt-4"></div>
    </>
  );
}

Timelines allow chaining animations with precise timing control. The yoyo option creates natural and fluid loops.

Integrating ScrollTrigger

components/ScrollTriggerDemo.tsx
'use client';
import { useEffect } from 'react';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

gsap.registerPlugin(ScrollTrigger);

export default function ScrollTriggerDemo() {
  useEffect(() => {
    gsap.to('.scroll-box', {
      scrollTrigger: {
        trigger: '.scroll-box',
        start: 'top 80%',
        end: 'bottom 20%',
        scrub: true
      },
      x: 400,
      rotation: 90
    });
  }, []);
  return <div className="scroll-box w-24 h-24 bg-purple-500"></div>;
}

ScrollTrigger links animations to scrolling. Scrub mode enables direct control via scroll position for immersive effects.

Advanced Animation with React

components/AdvancedGSAP.tsx
'use client';
import { useEffect, useRef } from 'react';
import { gsap } from 'gsap';

export default function AdvancedGSAP() {
  const containerRef = useRef<HTMLDivElement>(null);
  useEffect(() => {
    const ctx = gsap.context(() => {
      gsap.from('.item', {
        opacity: 0,
        y: 50,
        stagger: 0.2,
        duration: 0.8,
        ease: 'back.out(1.7)'
      });
    }, containerRef);
    return () => ctx.revert();
  }, []);
  return (
    <div ref={containerRef}>
      {[1,2,3].map(i => <div key={i} className="item">Item {i}</div>)}
    </div>
  );
}

gsap.context ensures automatic cleanup of animations in React. Stagger creates professional cascading effects.

Performance Optimization

utils/gsapConfig.ts
import { gsap } from 'gsap';

// Global configuration for performance
gsap.config({
  force3D: true,
  autoSleep: 60
});

export const createOptimizedTimeline = () => {
  return gsap.timeline({
    defaults: { ease: 'power3.out' },
    onComplete: () => gsap.set('.animated', { willChange: 'auto' })
  });
};

The force3D setting enables GPU acceleration. autoSleep reduces CPU usage when animations are inactive.

Best Practices

  • Always use gsap.context in React components to avoid memory leaks
  • Prefer timelines over multiple gsap.to calls
  • Enable force3D for transform animations
  • Clean up ScrollTriggers on component unmount
  • Test performance on mobile with moderate scrub and stagger values

Common Mistakes to Avoid

  • Forgetting to register plugins like ScrollTrigger before use
  • Not reverting GSAP contexts in useEffect cleanup
  • Applying animations to elements that don't exist yet in the DOM
  • Using absolute values instead of relative ones in complex timelines

Going Further

Deepen your skills with our Learni courses dedicated to modern web animations and GSAP.