Official GSAP skill for GSAP plugins — registration, ScrollToPlugin, ScrollSmoother, Flip, Draggable, Inertia, Observer, SplitText, ScrambleText, SVG and physics plugins, CustomEase, EasePack, CustomWiggle, CustomBounce, GSDevTools. Use when the user asks about a GSAP plugin, scroll-to, flip animati

GSAP Plugins Curated from GreenSock's official GSAP skills: https://github.com/greensock/gsap skills When to Use This Skill Apply when using or reviewing code that uses GSAP plugins: registering plugins, scroll to, flip/FLIP animations, draggable elements, SVG (DrawSVG, MorphSVG, MotionPath), text (SplitText, ScrambleText), physics, easing plugins (CustomEase, EasePack, CustomWiggle, CustomBounce), or GSDevTools. ScrollTrigger has its own skill (gsap scrolltrigger). Related skills: For core tweens use gsap core ; for ScrollTrigger use gsap scrolltrigger ; for React use gsap react . Licensing & Install (important) Every GSAP plugin is free , including for commercial use. Since [Webflow's acquisition of GSAP](https://gsap.com/blog/webflow GSAP/), Club GSAP is no longer a paid tier and no plugin requires a membership, license key, or auth token — this includes formerly Club only plugins ( SplitText , MorphSVG , etc.). ✅ Install everything from the public gsap npm package: npm install gsap . All plugins are included — import them as gsap/SplitText , gsap/MorphSVGPlugin , etc. ❌ Do not generate an .npmrc with a GreenSock auth token, suggest the private npm.greensock.com registry, or tell users to sign up for Club GSAP to access a plugin. Those instructions are outdated. Registering Plugins Register each plugin once so GSAP (and bundlers) know to include it. Use gsap.registerPlugin() with every plugin used in the project: ✅ Register before using the plugin in any tween or API call. ✅ In React, register at top level or once in the app (e.g. before first useGSAP); do not register inside a component that re renders. useGSAP is a plugin that needs to be registered before use. Scroll ScrollToPlugin Animates scroll position (window or a scrollable element). Use for “scroll to element” or “scroll to position” without ScrollTrigger. ScrollToPlugin — key config (scrollTo object): Option Description x , y Target scroll position (number), or "max" for maximum element Selector or element to scroll to (for scroll into view) offsetX , offsetY Offset in pixels from the target position ScrollSmoother Smooth scroll wrapper (smooths native scroll). Requires ScrollTrigger and a specific DOM structure (content wrapper + smooth wrapper). Use when smooth, momentum style scroll is needed. See GSAP docs for setup; register after ScrollTrigger. DOM structure would look like: DOM / UI Flip Capture state with Flip.getState() , then apply changes (e.g. layout or class changes), then use Flip.from() to animate from the previous state to the new state (FLIP: First, Last, Invert, Play). Use when animating between two layout states (lists, grids, expanded/collapsed). Flip — key config (Flip.from vars): Option Description absolute Use position: absolute during the flip (default: false ) nested When true, only the first level of children is measured (better for nested transforms) scale When true, scale elements to fit (avoids stretch); default true simple When true, only position/scale are animated (faster, less accurate) duration , ease Standard tween options More information https://gsap.com/docs/v3/Plugins/Flip Draggable Makes elements draggable, spinnable, or throwable with mouse/touch. Use for sliders, cards, reorderable lists, or any drag interaction. Draggable — key config options: Option Description type "x" , "y" , "x,y" , "rotation" , "scroll" bounds Element, selector, or { minX, maxX, minY, maxY } to constrain drag inertia true to enable throw/momentum (requires InertiaPlugin) edgeResistance 0–1; resistance when dragging past bounds cursor CSS cursor during drag onDragStart , onDrag , onDragEnd Callbacks; receive event and target onThrowUpdate , onThrowComplete Callbacks when inertia is active Inertia (InertiaPlugin) Works with Draggable for momentum after release, or track the inertia/velocity of any property of any object so that it can then seamlessly glide to a stop using a simple tween. Register with Draggable when using inertia: true : Or track velocity of a property: Then use "auto" to continue the current velocity and glide to a stop: Observer Normalizes pointer and scroll input across devices. Use for swipe, scroll direction, or custom gesture logic without tying directly to scroll position like ScrollTrigger. Observer — key config options: Option Description target Element or selector to observe onUp , onDown , onLeft , onRight Callbacks when swipe/scroll passes tolerance in that direction tolerance Pixels before direction is detected; default 10 type "touch" , "pointer" , or "wheel" (default: "touch,pointer" ) Text SplitText Splits an element’s text into characters, words, and/or lines (each in its own element) for staggered or per unit animation. Use when animating text character by character, word by word, or line by line. Returns an instance with chars , words , lines (and masks when mask is set). Restore original markup with revert() or let gsap.context() revert. Integrates with gsap.context() , matchMedia() , and useGSAP() . API: SplitText.create(target, vars) (target = selector, element, or array). With onSplit() (v3.13.0+), animations run on each split and on re split when autoSplit is used; returning a tween/timeline from onSplit() lets SplitText clean up and sync progress on re split: SplitText — key config (SplitText.create vars): Option Description type Comma separated: "chars" , "words" , "lines" . Default "chars,words,lines" . Only split what is needed (e.g. "words, chars" if not using lines) for performance. Avoid chars only without words/lines or use smartWrap: true to prevent odd line breaks. charsClass , wordsClass , linesClass CSS class on each split element. Append "++" to add an incremented class (e.g. linesClass: "line++" → line1 , line2 , …). aria "auto" (default), "hidden" , or "none" . Accessibility: "auto" adds aria label on the split element and aria hidden on line/word/char elements so screen readers read the label; "hidden" hides all from readers; "none" leaves aria unchanged. Use "none" plus a screen reader only duplicate if nested links/semantics must be exposed. autoSplit When true , reverts and re splits when fonts finish loading or when the element width changes (and lines are split), avoiding wrong line breaks. Animations must be created inside onSplit() so they target the newly split elements; return the animation from onSplit() for automatic cleanup and time sync on re split. onSplit(self) Callback when split completes (and on each re split if autoSplit is true ). Receives the SplitText instance. Returning a GSAP tween or timeline enables automatic revert/sync of that animation when re splitting. mask "lines" , "words" , or "chars" . Wraps each unit in an extra element with overflow: clip for mask/reveal effects. Only one type; access wrappers on the instance’s masks array (or use class mask if a class is set). tag Wrapper element tag; default "div" . Use "span" for inline (note: transforms like rotation/scale may not render on inline elements in some browsers). deepSlice When true (default), nested elements (e.g. <strong ) that span multiple lines are subdivided so lines don’t stretch vertically. Only applies when splitting lines. ignore Selector or element(s) to leave unsplit (e.g. ignore: "sup" ). smartWrap When splitting chars only, wraps words in a white space: nowrap span to avoid mid word line breaks. Ignored if words or lines are split. Default false . wordDelimiter Word boundary: string (default " " ), RegExp, or { delimiter: RegExp, replaceWith: string } for custom splitting (e.g. zero width joiner for hashtags, or non Latin). prepareText(text, parent) Function that receives raw text and parent element; return modified text before splitting (e.g. to insert break markers for languages without spaces). propIndex When true , adds a CSS variable with index on each split element (e.g. word: 1 , char: 2 ). reduceWhiteSpace Collapse consecutive spaces; default true . From v3.13.0 also honors line breaks and can insert <br for <pre . onRevert Callback when the instance is reverted. Tips: Split only what is animated (e.g. skip chars if only animating words). For custom fonts, split after they load (e.g. document.fonts.ready.then(...) ) or use autoSplit: true with onSplit() . To avoid kerning shift when splitting chars, use CSS font kerning: none; text rendering: optimizeSpeed; . Avoid text wrap: balance ; it can interfere with splitting. SplitText does not support SVG <text . Learn more: [SplitText](https://gsap.com/docs/v3/Plugins/SplitText/) ScrambleText Animates text with a scramble/glitch effect. Use when revealing or transitioning text with a scramble. SVG DrawSVG (DrawSVGPlugin) Reveals or hides the stroke of SVG elements by animating stroke dashoffset / stroke dasharray . Works on <path , <line , <polyline , <polygon , <rect , <ellipse . Use when “drawing” or “erasing” strokes. drawSVG value: Describes the visible segment of the stroke along the path (start and end positions), not “animate from A to B over time.” Format: "start end" in percent or length. Examples: "0% 100%" = full stroke; "20% 80%" = stroke only between 20% and 80% (gaps at both ends). The tween animates from the element’s current segment to the target segment — e.g. gsap.to(" path", { drawSVG: "0% 100%" }) goes from whatever it is now to full stroke. Single value (e.g. 0 , "100%" ) means start is 0: "100%" is equivalent to "0% 100%" . Required: The element must have a visible stroke — set stroke and stroke width in CSS or as SVG attributes; otherwise nothing is drawn. Caveats: Only affects stroke (not fill). Prefer single segment <path elements; multi segment paths can render oddly in some browsers. Contents of <use cannot be visually changed. DrawSVGPlugin.getLength(element) and DrawSVGPlugin.getPosition(element) return stroke length and current position. Learn more: [DrawSVG](https://gsap.com/docs/v3/Plugins/DrawSVGPlugin) MorphSVG (MorphSVGPlugin) Morphs one SVG shape into another by animating the d attribute (path data). Start and end shapes do not need the same number of points — MorphSVG converts to cubic beziers and adds points as needed. Use for icon to icon morphs, shape transitions, or path based animations. Works on <path , <polyline , and <polygon ; <circle , <rect , <ellipse , and <line are converted internally or via MorphSVGPlugin.convertToPath(selector element) (replaces the element in the DOM with a <path ). morphSVG value: Can be a selector (e.g. " lightning" ), an element , raw path data (e.g. "M47.1,0.8 73.3,0.8..." ), or for polygon/polyline a points string (e.g. "240,220 240,70 70,70 70,220" ). For full config use the object form with shape as the only required property. MorphSVG — key config (morphSVG object): Option Description shape (Required.) Target shape: selector, element, or raw path string. type "linear" (default) or "rotational" . Rotational uses angle/length interpolation and can avoid kinks mid morph; try it when linear looks wrong. map How segments are matched: "size" (default), "position" , or "complexity" . Use when start/end segments don’t line up; if none work, split into multiple paths and morph each. shapeIndex Offsets which point in the start path maps to the first point in the end

gsap-plugins