gsap-pluginslisted

# GSAP Plugins ## 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**. ## Registering Plugins Register each plugin once so GSAP (and bundlers) know to include it. Use **gsap.registerPlugin()** with every plugin used in the project: ```javascript import gsap from "gsap"; import { ScrollToPlugin } from "gsap/ScrollToPlugin"; import { Flip } from "gsap/Flip"; import { Draggable } from "gsap/Draggable"; gsap.registerPlugin(ScrollToPlugin, Flip, Draggable); ``` - ✅ 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. ```javascript gsap.registerPlugin(ScrollToPlugin); gsap.to(window, { duration: 1, scrollTo: { y: 500 } }); gsap.to(window, { duration: 1, scrollTo: { y: "#s