A plugin adds extra capabilities to GSAP's core. This allows the GSAP core to remain relatively small and lets you add features only when you need them.
Some plugins are only available to our wonderful Club GSAP members, but you can try them all for free on CodePen, or sign up today to use them on your site and support us in our quest to make the web more fun!
Included in GSAP's core
- Ticker with lag smoothing
- Responsive - matchMedia()
- Cleanup - context() & revert()
Installing/Loading a plugin
At the end of the day, all the plugins are just JS files - just like the core library. You can install them with script tags, via npm, with yarn, or even with a tgz file.
Head on over to our install helper to choose your own adventure.
Registering a plugin
Registering a plugin with the GSAP core ensures that the two work seamlessly together and also prevents tree shaking issues in build tools/bundlers. You only need to register a plugin once before using it, like:
//list as many as you'd like
gsap.registerPlugin(MotionPathPlugin, ScrollTrigger, MorphSVGPlugin);
Obviously you need to load the plugin file first. There is no harm in registering the same plugin multiple times (but it doesn't help either).
Plugins are a great way to boost to your animation skills! With just a tiny bit more code and GSAP's ScrollTrigger, you can hook your tweens and timelines up to scroll...
Make elements Draggable, flickable, or spinnable...
Animate elements along SVG paths with MotionPathPlugin, and even edit those SVG paths right in the browser!