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()
useLayoutEffect(() => {
// use gsap context for easy cleanup!
let ctx = gsap.context(() => {
gsap.to(boxRef.current, {
duration: 10,
repeat: -1,
rotation: 360,
})
});
return () => ctx.revert();
}, [])
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)
},
})
GSAP Timeline, The Ultimate Sequencing Tool
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.
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
Flip -
ScrollTrigger
ScrollTrigger -
MotionPath
MotionPath -
Draggable
Draggable -
Observer
Observer
Free to use. Forever
The Core library & Free* plugins are for everyone. Pay only if you require the special commercial license, or to gain access to Club GSAP's powerful plugins & Discord community.
* Pay only if you need a Commercial License
GSAP Demos on CodePen
-
Every time a new GSAP plugin is introduced, I'm close to bursting from excitement. The simplicity of the API makes applying these tools in projects such a dream.
-
With the incredible functionality, and the mind-blowing customer service, the price of Club GSAP admission is well worth it!
-
GSAP is the best thing that happened to SVG animations since SVG animations.
-
There is no doubt that GSAP is currently the best available tool for creating astonishing interactive websites and animation effects.
-
The depth of GSAP blows me away like all the time. It seems like I stumble on something new and amazing every time I peek at the docs.
