GSAP (GreenSock Animation Platform)

GSAP is a framework-agnostic JavaScript animation library that turns developers into animation superheroes. Build high-performance animations that work in every major browser. Animate CSS, SVG, canvas, React, Vue, WebGL, colors, strings, motion paths, generic objects... anything JavaScript can touch! GSAP's <a href="https://gsap.com/docs/v3/Plugins/ScrollTrigger/">ScrollTrigger</a> plugin delivers jaw-dropping scroll-based animations with minimal code. <a href="https://gsap.com/docs/v3/GSAP/gsap.matchMedia()">gsap.matchMedia()</a> makes building responsive, accessibility-friendly animations a breeze.

No other library delivers such advanced sequencing, reliability, and tight control while solving real-world problems on over 12 million sites. GSAP works around countless browser inconsistencies; your animations just work. At its core, GSAP is a high-speed property manipulator, updating values over time with extreme accuracy. It's up to 20x faster than jQuery!

GSAP is completely flexible; sprinkle it wherever you want. Zero dependencies.

There are many optional <a href="https://gsap.com/docs/v3/Plugins">plugins</a> and <a href="https://gsap.com/docs/v3/Eases">easing</a> functions for achieving advanced effects easily like <a href="https://gsap.com/docs/v3/Plugins/ScrollTrigger/">scrolling</a>, <a href="https://gsap.com/docs/v3/Plugins/MorphSVGPlugin">morphing</a>, text splitting, animating along a <a href="https://gsap.com/docs/v3/Plugins/MotionPathPlugin">motion path</a> or <a href="https://gsap.com/docs/v3/Plugins/Flip/">FLIP</a> animations. There's even a handy <a href="https://gsap.com/docs/v3/Plugins/Observer/">Observer</a> for normalizing event detection across browsers/devices.

Get Started

Docs & Installation

View the <a href="https://gsap.com/docs">full documentation here</a>, including an <a href="https://gsap.com/install">installation guide</a>.

CDN

<script src="https://cdn.jsdelivr.net/npm/gsap@3.15/dist/gsap.min.js"></script>

See <a href="https://www.jsdelivr.com/gsap">JSDelivr's dedicated GSAP page</a> for quick CDN links to the core files/plugins. There are more <a href="https://gsap.com/install">installation instructions</a> at gsap.com.

Every major ad network excludes GSAP from file size calculations and most have it on their own CDNs, so contact them for the appropriate URL(s).

NPM

See the <a href="https://gsap.com/install">guide to using GSAP via NPM here</a>.

npm install gsap

GSAP's core can animate almost anything including CSS and attributes, plus it includes all of the <a href="https://gsap.com/docs/v3/GSAP/UtilityMethods">utility methods</a> like <a href="https://gsap.com/docs/v3/GSAP/UtilityMethods/interpolate()">interpolate()</a>, <a href="https://gsap.com/docs/v3/GSAP/UtilityMethods/mapRange()">mapRange()</a>, most of the <a href="https://gsap.com/docs/v3/Eases">eases</a>, and it can do snapping and modifiers.

// typical import
import gsap from "gsap";

// get other plugins:
import ScrollTrigger from "gsap/ScrollTrigger";
import Flip from "gsap/Flip";
import Draggable from "gsap/Draggable";

// or all tools are exported from the "all" file (excluding members-only plugins):
import { gsap, ScrollTrigger, Draggable, MotionPathPlugin } from "gsap/all";

// don't forget to register plugins
gsap.registerPlugin(ScrollTrigger, Draggable, Flip, MotionPathPlugin); 

The NPM files are ES modules, but there's also a /dist/ directory with <a href="https://www.davidbcalhoun.com/2014/what-is-amd-commonjs-and-umd/">UMD</a> files for extra compatibility.

GSAP is FREE!

Thanks to Webflow, GSAP is now 100% FREE including ALL of the bonus plugins like SplitText, MorphSVG, and all the others that were exclusively available to Club GSAP members. That's right - the entire GSAP toolset is FREE, even for commercial use! 🤯 Read more here

ScrollTrigger & ScrollSmoother

If you're looking for scroll-driven animations, GSAP's <a href="https://gsap.com/docs/v3/Plugins/ScrollTrigger/">ScrollTrigger</a> plugin is the standard. There's a companion <a href="https://gsap.com/docs/v3/Plugins/ScrollSmoother/">ScrollSmoother</a> as well.

Using React?

There's a <a href="https://www.npmjs.com/package/@gsap/react">@gsap/react</a> package that exposes a useGSAP() hook which is a drop-in replacement for useEffect()/useLayoutEffect(), automating cleanup tasks. Please read the <a href="https://gsap.com/react">React guide</a> for details.

Resources

• <a href="https://gsap.com/">gsap.com</a>
• <a href="https://gsap.com/get-started/">Getting started guide</a>
• <a href="https://gsap.com/docs/">Docs</a>
• <a href="https://gsap.com/demos">Demos & starter templates</a>
• <a href="https://gsap.com/community/">Community forums</a>
• <a href="https://gsap.com/docs/v3/Eases">Ease Visualizer</a>
• <a href="https://gsap.com/showcase">Showcase</a>
• <a href="https://www.youtube.com/@GreenSockLearning">YouTube Channel</a>
• <a href="https://gsap.com/cheatsheet">Cheat sheet</a>
• <a href="https://webflow.com">Webflow</a>

Need help?

Ask in the friendly <a href="https://gsap.com/community/">GSAP forums</a>. Or share your knowledge and help someone else - it's a great way to sharpen your skills! Report any bugs there too (or <a href="https://github.com/greensock/GSAP/issues">file an issue here</a> if you prefer).

License

GreenSock's standard "no charge" license can be viewed at <a href="https://gsap.com/standard-license">https://gsap.com/standard-license</a>.

Copyright (c) 2008-2026, GreenSock. All rights reserved.

<p align="center"> <img src="https://i.imgur.com/QZownhg.png" width="240" /> </p> <br /> <h1 align="center">react-spring</h1> <h3 align="center">A spring-physics first animation library <br>giving you flexible tools to confidently cast your ideas</h3> <br> <p align="center"> <a href="https://www.npmjs.com/package/react-spring" target="_blank"> <img src="https://img.shields.io/npm/v/react-spring.svg?style=flat&colorA=000000&colorB=000000" /> </a> <a href="https://www.npmjs.com/package/react-spring" target="_blank"> <img src="https://img.shields.io/npm/dm/react-spring.svg?style=flat&colorA=000000&colorB=000000" /> </a> <a href="https://discord.gg/ZZjjNvJ" target="_blank"> <img src="https://img.shields.io/discord/740090768164651008?style=flat&colorA=000000&colorB=000000&label=discord&logo=discord&logoColor=ffffff" alt="Chat on Discord"> </a> </p> <br>

react-spring is a cross-platform spring-physics first animation library.

It's as simple as:

const styles = useSpring({
  from: {
    opacity: 0
  },
  to: {
    opacity: 1
  }
})

<animated.div style={styles} />

Just a small bit about us:

• Cross-Platform: We support react-dom, react-native, react-three-fiber, react-konva & react-zdog.
• Versatile: Be declarative with your animations or if you prefer, imperative.
• Spring-Physics First: By default animation use springs for fluid interactivity, but we support durations with easings as well.

There's a lot more to be had! Give it a try and find out.

Getting Started

⚡️ Jump Start

# Install the entire library
npm install react-spring
# or just install your specific target (recommended)
npm install @react-spring/web

import { animated, useSpring } from '@react-spring/web'

const FadeIn = ({ isVisible, children }) => {
  const styles = useSpring({
    opacity: isVisible ? 1 : 0,
    y: isVisible ? 0 : 24,
  })

  return <animated.div style={styles}>{children}</animated.div>
}

It's as simple as that to create scroll-in animations when value of isVisible is toggled.

📖 Documentation and Examples

More documentation on the project can be found here.

Pages contain their own examples which you can check out there, or open in codesandbox for a more in-depth view!

---

📣 What others say

<p align="middle"> <img src="assets/testimonies.jpg" /> </p>

Used by

<p align="middle"> <a href="https://nextjs.org/"><img width="285" src="assets/projects/next.png"></a> <a href="https://codesandbox.io/"><img width="285" src="assets/projects/csb.png"></a> <a href="https://aragon.org/"><img width="285" src="assets/projects/aragon.png"></a> </p>

And many others...

Backers

Thank you to all our backers! 🙏 If you want to join them here, then consider contributing to our Opencollective.

<a href="https://opencollective.com/react-spring#backers" target="_blank"> <img src="https://opencollective.com/react-spring/backers.svg?width=890"/> </a>

Contributors

This project exists thanks to all the people who contribute.

<a href="https://github.com/react-spring/react-spring/graphs/contributors"> <img src="https://opencollective.com/react-spring/contributors.svg?width=890" /> </a>