Core

One library, unlimited inspiration

GSAP Core - everything you need to create blazingly fast, responsive animations for all browsers.

Animate Anything

GSAP is framework agnostic and endlessly flexible - animate any property of any object with a simple Tween.

<div id="animate-anything-css"></div>

gsap.to("#animate-anything-css", {
  duration: 10,
  ease: "none",
  repeat: -1,
  rotation: 360,
})

const RotatingCube = () => {
  const boxRef = useRef()

  useGSAP(() => {
    gsap.to(boxRef.current, {
      duration: 10,
      repeat: -1,
      rotation: 360,
    })
  })

  return (
    <div ref={boxRef} />
  )
}

<svg>
  <g id="animate-anything-svg">
    ...
  </g>
</svg>

gsap.to("#animate-anything-svg", {
  duration: 10,
  ease: "none",
  repeat: -1,
  rotation: 360,
})

const cube = new Mesh(geometry, material)
scene.add(cube)

gsap.to(cube.rotation, {
  x: Math.PI * 2,
  y: Math.PI * 2,
  duration: 10,
  repeat: -1,
  ease: "none",
  onUpdate: () => {
    renderer.render(scene, camera)
  },
})

Arrange Tweens in a Timeline to precisely choreograph animations. Control entire sequences as a whole using methods like play(), pause(), reverse(), timeScale() and seek()

const tl = gsap.timeline({paused: true});

tl.to(".scrubber", { x: 500, duration: 2 })
	.to(".mask",{ scaleX: 0},"<")
	.to(".icon1",{scale: 1, duration: 0.3}, 0.5)
	.to(".text1",{ autoAlpha: 1, scale: 1}, "-=0.2")

	.add(sequence2,"+=0.1").timeScale(0.8)
	
	...

	tl.seek(1.2).play()

Responsive & Accessibility-Friendly

Set up animations for different viewport sizes and make then a11y friendly with gsap.matchMedia.

Reduced Motion

let mm = gsap.matchMedia();

mm.add({
 reduceMotion: "(prefers-reduced-motion: reduce)"
}, (context) => {

  let {reduceMotion} = context.conditions;

  gsap.to(".windmill", {
		rotation: 360,
    // adjust animation in tweens
		duration: reduceMotion ? 7.2 : 3.6,
	});

  // or set up easy conditionals
  if (!reduceMotion) { 
   let tl = gsap.timeline()
   tl.to()...
  }
});

Extend the Core with GSAP's Plugins

Flip

Seamlessly transition between two state. Flip does the heavy lifting.

Flip
ScrollTrigger

Jaw-dropping scroll-based animations with minimal code.

ScrollTrigger
MotionPath

Forge your own (motion) path with this powerful plugin.

MotionPath
Draggable

Make virtually any DOM element draggable, spinnable, and more.

Draggable
Observer

Tell Observer which event types to watch and it will collect delta values.

Observer