mirror of
https://github.com/greensock/gsap-skills
synced 2026-09-22 23:34:24 +08:00
Rodrigo Hernando
7f8b61e6e9
- Updates the demo for Nuxt, no need to import the composable and use the client suffix in the file name - Updates the README.MD file in the examples folder - Updates the SKILL.md file in the frameworks folder
91 lines
2.8 KiB
TypeScript
91 lines
2.8 KiB
TypeScript
import gsap from "gsap";
|
|
import { ScrollTrigger } from "gsap/ScrollTrigger";
|
|
|
|
const PLUGINS = [
|
|
"CSSRulePlugin",
|
|
"CustomBounce",
|
|
"CustomEase",
|
|
"CustomWiggle",
|
|
"Draggable",
|
|
"DrawSVGPlugin",
|
|
"EaselPlugin",
|
|
"EasePack",
|
|
"Flip",
|
|
"GSDevTools",
|
|
"InertiaPlugin",
|
|
"MorphSVGPlugin",
|
|
"MotionPathHelper",
|
|
"MotionPathPlugin",
|
|
"Observer",
|
|
"Physics2DPlugin",
|
|
"PhysicsPropsPlugin",
|
|
"PixiPlugin",
|
|
"ScrambleTextPlugin",
|
|
"ScrollSmoother",
|
|
"ScrollToPlugin",
|
|
"ScrollTrigger",
|
|
"SplitText",
|
|
"TextPlugin",
|
|
] as const;
|
|
|
|
type Plugins = typeof PLUGINS[number];
|
|
|
|
// In order to dynamically load all the GSAP plugins
|
|
const pluginMap = {
|
|
CustomEase: () => import("gsap/CustomEase"),
|
|
Draggable: () => import("gsap/Draggable"),
|
|
CSSRulePlugin: () => import("gsap/CSSRulePlugin"),
|
|
EaselPlugin: () => import("gsap/EaselPlugin"),
|
|
EasePack: () => import("gsap/EasePack"),
|
|
Flip: () => import("gsap/Flip"),
|
|
MotionPathPlugin: () => import("gsap/MotionPathPlugin"),
|
|
Observer: () => import("gsap/Observer"),
|
|
PixiPlugin: () => import("gsap/PixiPlugin"),
|
|
ScrollToPlugin: () => import("gsap/ScrollToPlugin"),
|
|
ScrollTrigger: () => import("gsap/ScrollTrigger"),
|
|
TextPlugin: () => import("gsap/TextPlugin"),
|
|
DrawSVGPlugin: () => import("gsap/DrawSVGPlugin"),
|
|
Physics2DPlugin: () => import("gsap/Physics2DPlugin"),
|
|
PhysicsPropsPlugin: () => import("gsap/PhysicsPropsPlugin"),
|
|
ScrambleTextPlugin: () => import("gsap/ScrambleTextPlugin"),
|
|
CustomBounce: () => import("gsap/CustomBounce"),
|
|
CustomWiggle: () => import("gsap/CustomWiggle"),
|
|
GSDevTools: () => import("gsap/GSDevTools"),
|
|
InertiaPlugin: () => import("gsap/InertiaPlugin"),
|
|
MorphSVGPlugin: () => import("gsap/MorphSVGPlugin"),
|
|
MotionPathHelper: () => import("gsap/MotionPathHelper"),
|
|
ScrollSmoother: () => import("gsap/ScrollSmoother"),
|
|
SplitText: () => import("gsap/SplitText"),
|
|
} as const;
|
|
|
|
type PluginMap = typeof pluginMap;
|
|
type Plugins = keyof PluginMap;
|
|
|
|
// Resolves the module type for a given key, then picks the named export matching the key
|
|
// this allows to have the type definitions for autocomplete in your code editor
|
|
type PluginModule<K extends Plugins> = Awaited<ReturnType<PluginMap[K]>>;
|
|
type PluginExport<K extends Plugins> = PluginModule<K>[K & keyof PluginModule<K>];
|
|
|
|
export default function() {
|
|
// Register all the GSAP Plugins you want at this point
|
|
gsap.registerPlugin(ScrollTrigger);
|
|
|
|
/*
|
|
If you want to lazy load some of the plugins that are
|
|
not widely used in your app (for example in just a couple
|
|
of components or a single route), you can use this method
|
|
*/
|
|
async function lazyLoadPlugin<K extends Plugins>(plugin: K): Promise<PluginExport<K>> {
|
|
const loader = pluginMap[plugin];
|
|
const m = await loader();
|
|
const p = (m as any)[plugin];
|
|
gsap.registerPlugin(p);
|
|
return p;
|
|
}
|
|
|
|
return {
|
|
gsap,
|
|
ScrollTrigger,
|
|
lazyLoadPlugin,
|
|
};
|
|
}; |