GitHub - greensock/GSAP: GSAP (GreenSock Animation Platform), a JavaScript animation library for the modern web
Service

GitHub - greensock/GSAP: GSAP (GreenSock Animation Platform), a JavaScript animation library for the modern web

greensock
2026.05.10
·GitHub·by 임근석/부산/NLP
#Animation#JavaScript#Library#Performance#Web Development

Key Points

  • 1GSAP (GreenSock Animation Platform) is a high-performance, framework-agnostic JavaScript animation library capable of animating nearly anything JavaScript can touch, from CSS to React and SVG, while working reliably across all major browsers.
  • 2Renowned for its advanced sequencing, precise property manipulation, and speed (up to 20x faster than jQuery), GSAP includes powerful tools like ScrollTrigger for scroll-based animations and gsap.matchMedia() for responsive designs, all with zero dependencies.
  • 3The entire GSAP toolset, including all previously members-only bonus plugins, is now completely free for commercial use and can be easily installed via CDN or NPM, supported by extensive documentation and community resources.

The GreenSock Animation Platform (GSAP) is a framework-agnostic JavaScript animation library engineered to facilitate high-performance animations across all major browsers. Functioning primarily as a high-speed property manipulator, GSAP updates numerical values over time with extreme accuracy, enabling the animation of a diverse range of targets including CSS properties, SVG, canvas elements, React and Vue components, WebGL, colors, strings, motion paths, and generic JavaScript objects. The library is noted for its reliability, precise control, and advanced sequencing capabilities, effectively resolving common animation challenges and inherently addressing numerous browser inconsistencies to ensure consistent animation behavior. Performance-wise, it claims to be up to 20 times faster than jQuery and operates with zero external dependencies.

GSAP's core functionality encompasses utility methods like interpolate(), mapRange(), various easing functions, snapping, and modifiers. Its modular architecture is enhanced by a suite of optional plugins that extend its capabilities:

  • ScrollTrigger: A leading plugin for creating sophisticated scroll-based animations, often paired with its companion, ScrollSmoother.
  • gsap.matchMedia(): Facilitates the development of responsive and accessibility-friendly animations by applying different animation logic based on media queries.
  • Flip: A plugin designed for FLIP (First, Last, Invert, Play) animations, optimizing performance for layout changes.
  • Draggable: Enables interactive drag-and-drop functionalities.
  • MotionPathPlugin: Allows objects to animate along predefined SVG paths or custom coordinates.
  • SplitText: A utility for splitting text into individual characters, words, or lines for granular animation control.
  • MorphSVG: Used for morphing one SVG shape into another.
  • Observer: Normalizes event detection across different browsers and devices.

Integration with frameworks like React is supported via the @gsap/react package, which provides a useGSAP() hook that serves as a drop-in replacement for useEffect()/useLayoutEffect(), automating cleanup tasks for animations within React components.

Installation can be performed through a Content Delivery Network (CDN) by including a script tag pointing to https://cdn.jsdelivr.net/npm/gsap@3.15/dist/gsap.min.js. Alternatively, for module-based environments, GSAP can be installed via npm using npm install gsap. The npm distribution provides ES modules, while a /dist/ directory contains UMD files for broader compatibility. Plugins are typically imported separately and registered with the core GSAP library using gsap.registerPlugin().

As of a significant licensing change, GSAP, including all previously members-exclusive bonus plugins such as SplitText and MorphSVG, is 100% free for both personal and commercial use, attributed to support from Webflow. The standard license is available for review on the GreenSock website. The platform is supported by extensive documentation, numerous demos, a dedicated community forum for support, and a YouTube channel.