website·Indexed 40 days ago
https://gsap.com/docs/v3/A robust JavaScript animation library for professionals. GSAP v3 provides high-performance property setting via Tweens and Timelines, featuring a comprehensive suite of easing functions, utility methods, and core plugins for animating CSS properties, attributes, and complex sequences.
gsap.utils object contains a set of helper functions for managing numeric behaviors, mathematical operations, and range manipulation. A key feature of many gsap.utils methods is that they can optionally return functions instead of static values. When a function is returned and plugged into a tween, GSAP executes that function for each individual target, allowing for dynamic, per-target end values rather than a single shared value.GSAP extends its core functionality through specialized plugins. Key categories include:
Scroll Plugins:
ScrollTrigger: Trigger animations based on scroll position.ScrollTo: Animate scrolling to a specific element or position.ScrollSmoother: Adds smooth scrolling (requires ScrollTrigger).Text Plugins:
SplitText: Splits text into lines, words, or characters.ScrambleText: Creates a scrambling text effect.TextPlugin: Replaces text content.SVG Plugins:
DrawSVG: Animates the drawing of SVG strokes.MorphSVG: Morphs one SVG shape into another.MotionPath: Animates elements along a path.UI Plugins:
Flip: Simplifies animating elements between different layouts.Draggable: Enables dragging of elements.Inertia: Adds momentum/inertia to animations.Observer: Detects events like scroll, mouse wheel, or touch without requiring actual scroll movement.gsap.matchMedia() allows you to wrap GSAP animations and ScrollTriggers in a function that only executes when a specific media query matches. When the media query no longer matches, all animations and ScrollTriggers created within that function are automatically reverted. This is ideal for handling mobile/desktop breakpoints or accessibility preferences like prefers-reduced-motion.// Create a MatchMedia instance
let mm = gsap.matchMedia();
// Add a media query. The function runs when the query matches
mm.add("(min-width: 800px)", () => {
gsap.to(".box", { rotation: 360 });
ScrollTrigger.create({ trigger: ".box", start: "top center" });
return () => {
// Optional: custom cleanup code that runs when it STOPS matching
};
});
// Revert all animations/ScrollTriggers across all matchMedia queries
mm.revert();Tween and Timeline engines. The core is designed to be lightweight, with advanced functionality moved into optional plugins.GSAP's core library includes essential animation tools without requiring additional plugins. Key built-in capabilities include:
none, power1 through power4, back, bounce, circ, elastic, expo, sine, and steps(n).gsap.context() and revert() for cleanup, and gsap.matchMedia() for responsive and accessible animations.clamp(), distribute(), interpolate(), mapRange(), normalize(), random(), selector(), shuffle(), snap(), toArray(), and wrap().gsap.globalTimeline is the root Timeline instance that drives all animations in GSAP. It can be used to affect all active tweens and timelines simultaneously. Note that gsap.delayedCalls() are also treated as tweens and will be affected by global timeline controls. If you need to exclude delayed calls, use gsap.exportRoot() instead.gsap.context() collects all GSAP animations and ScrollTriggers created within its scope. This allows developers to revert or kill all associated animations at once without tracking individual variables or arrays. This is especially useful for cleanup in framework components (like React or Angular) to return elements to their original state.let ctx = gsap.context(() => {
gsap.to(".box", { x: 100 });
gsap.from(".circle", { opacity: 0 });
gsap.timeline().to(".box", { y: 100 }).to(".circle", { scale: 2 });
});
// Reverts all animations created inside the context to their original state
ctx.revert();A modifier function receives two parameters that can be used to calculate the final value of a property:
value (number | string): The value that the regular tween is about to apply. This is typically a number (e.g., for x or rotation), but can be a string for properties like left (e.g., "212px") or boxShadow.target (object): The target object being animated.Returning a value from this function overrides the tween's default value for that tick.