Skip to main content

​
Installation

Install GSAP via npm or yarn: 
npm install gsap

​
Basic usage

GSAP (GreenSock Animation Platform) provides a powerful imperative API for creating complex animations. It works with any JavaScript framework or vanilla JS. 
import { useRef, useEffect } from 'react'
import gsap from 'gsap'

function GSAPAnimation() {
  const boxRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    if (!boxRef.current) return

    gsap.to(boxRef.current, {
      rotation: 360,
      scale: 1.5,
      duration: 1,
      yoyo: true,
      repeat: -1,
      ease: 'power2.inOut'
    })
  }, [])

  return <div ref={boxRef} className="w-16 h-16 bg-green-500" />
}

​
Core animation methods

Animate from current state to defined values.
gsap.to(element, {
  x: 100,
  rotation: 360,
  duration: 1
})

​
Key features

Performance

Ultra-high performance with 60fps animations. Up to 20x faster than jQuery.

Easing library

Extensive collection of easing functions including elastic, bounce, and custom bezier curves.

Timeline

Sequence and orchestrate complex animations with precise timing control.

Cross-browser

Works everywhere, even on older browsers. Handles vendor prefixes automatically.

​
Timeline for complex sequences

Create sophisticated animation sequences: 
import { useEffect, useRef } from 'react'
import gsap from 'gsap'

function TimelineAnimation() {
  const box1Ref = useRef(null)
  const box2Ref = useRef(null)
  const box3Ref = useRef(null)

  useEffect(() => {
    const tl = gsap.timeline({ repeat: -1, yoyo: true })

    tl.to(box1Ref.current, { x: 100, duration: 1 })
      .to(box2Ref.current, { x: 100, duration: 1 }, '-=0.5') // Overlap by 0.5s
      .to(box3Ref.current, { x: 100, duration: 1 }, '<') // Start with previous

    return () => tl.kill()
  }, [])

  return (
    <div>
      <div ref={box1Ref} className="box" />
      <div ref={box2Ref} className="box" />
      <div ref={box3Ref} className="box" />
    </div>
  )
}

​
Advanced easing

GSAP includes professional easing functions: 
gsap.to(element, {
  x: 100,
  ease: 'power2.inOut',     // Smooth acceleration/deceleration
  // ease: 'elastic.out(1, 0.3)',  // Elastic bounce
  // ease: 'bounce.out',           // Bouncing effect
  // ease: 'steps(12)',            // Step animation
  duration: 1
})

​
Controlling animations

GSAP gives you full control over animation playback: 
const animation = gsap.to(element, {
  x: 100,
  paused: true,  // Start paused
  duration: 1
})

// Control playback
animation.play()
animation.pause()
animation.reverse()
animation.restart()
animation.seek(0.5)  // Jump to 50% progress

​
Example from the playground

Here’s the GSAP demo from the Animation Playground: 
import { useRef, useState } from 'react'
import gsap from 'gsap'

export default function GSAPDemo() {
  const boxRef = useRef<HTMLDivElement>(null)
  const [isRunning, setIsRunning] = useState(false)

  const startAnimation = () => {
    if (!boxRef.current) return
    setIsRunning(true)
    
    gsap.to(boxRef.current, {
      rotation: 360,
      scale: 1.5,
      duration: 1,
      yoyo: true,
      repeat: 1,
      ease: 'power2.inOut',
      onComplete: () => setIsRunning(false)
    })
  }

  return (
    <div>
      <div ref={boxRef} className="w-16 h-16 bg-green-500 rounded-lg" />
      <button
        onClick={startAnimation}
        disabled={isRunning}
        className="mt-4 px-4 py-2 bg-green-500 text-white rounded"
      >
        Start GSAP Animation
      </button>
    </div>
  )
}

​
When to use it

GSAP excels at creating complex, orchestrated animation sequences with precise timing control using timelines.
When you need the absolute best performance for intensive animations, GSAP is the industry standard.
GSAP has exceptional SVG support with plugins for morphing, drawing, and complex path animations.
Trusted by major brands and used in award-winning websites. Backed by GreenSock’s professional support.
When you need precise control over every aspect of your animations including playback, scrubbing, and dynamic updates.

​
Plugins and extras

GSAP offers powerful plugins for advanced features:
  • ScrollTrigger: Scroll-based animations
  • Draggable: Advanced drag-and-drop functionality
  • MorphSVG: Morph between SVG shapes (Club GreenSock)
  • SplitText: Animate text character-by-character (Club GreenSock)
  • DrawSVG: Animate SVG strokes (Club GreenSock)
Some plugins require a Club GreenSock membership for commercial use.

​
Learn more

Animation examples

Explore GSAP animation examples

Official docs

Visit the GSAP documentation

Build docs developers (and LLMs) love

Get started for freeTalk to us