diff --git a/README.md b/README.md index 0ef8a06..0cd14ce 100644 --- a/README.md +++ b/README.md @@ -7,7 +7,7 @@ GSAP module for Nuxt. - Helps you integrate the GSAP animation library - Provides a solution for global use - Automatically registers plugins after activation -- Allows you to easily register global effects +- Allows you to easily register global effects & eases - Supports Club GreenSock premium plugins - Zero-config setup ready to go - TypeScript friendly @@ -452,6 +452,45 @@ $gsap.effects.fade('.class') $gsap.effects.slideIn('#id') ``` +## Register Eases + +- Type: `object[]` +- Default: `undefined` + +Provides an easy way to register global eases. + +Once the ease is registered, it can be accessed directly on the `gsap` animations. + +```ts +// nuxt.config.ts + +{ + gsap: { + registerEases: [ + { + name: 'customEase', + ease: progress => { + return progress // linear + } + }, + { + name: 'customEase2' + // ... + } + ] + } +} +``` + +**Available globally** + +```ts +const { $gsap } = useNuxtApp() + +$gsap.to('.class', { x: 100, ease: 'customEase' }) +$gsap.to('#id', { x: 200, ease: 'customEase2' }) +``` + ## Club Plugins Specifies GSAP premium plugins. diff --git a/src/module.ts b/src/module.ts index 8456173..b2d761f 100644 --- a/src/module.ts +++ b/src/module.ts @@ -20,13 +20,15 @@ export default defineNuxtModule({ extraPlugins: plugins, extraEases: eases, clubPlugins: club, - registerEffects: effects + registerEffects: regEffects, + registerEases: regEases } = options const pluginImport: string[] = [] const pluginRegister: string[] = [] const pluginType: string[] = [] const pluginEffect: string[] = [] + const pluginEase: string[] = [] const pluginClient: string[] = [] const addPlugin = ({ @@ -81,22 +83,32 @@ export default defineNuxtModule({ if (club?.customWiggle) addPlugin({ name: 'CustomWiggle' }) // Global Effects - if (effects) - effects.forEach(effect => + if (regEffects) + regEffects.forEach(effect => pluginEffect.push(`gsap.registerEffect(${stringify(effect)});`) ) + // Global Eases + if (regEases) + regEases.forEach(ease => + pluginEase.push( + `gsap.registerEase(${stringify(ease.name)}, ${stringify(ease.ease)});` + ) + ) + // Client mode - if (plugins || eases || club || effects) { + if (plugins || eases || club || regEffects || regEases) { const registerPlugin = pluginRegister.length ? `gsap.registerPlugin(${pluginRegister.join(',')});` : '' const registerEffect = pluginEffect.length ? pluginEffect.join('\n') : '' + const registerEase = pluginEase.length ? pluginEase.join('\n') : '' pluginClient.push( `if(process.client) {`, ` ${registerPlugin}`, ` ${registerEffect}`, + ` ${registerEase}`, `}` ) } diff --git a/src/types/module.ts b/src/types/module.ts index 3b8b85d..afe8be4 100644 --- a/src/types/module.ts +++ b/src/types/module.ts @@ -74,6 +74,31 @@ export interface ModuleOptions { * @since 2.2.0 */ registerEffects?: object[] + /** + * Provides an easy way to register global eases. + * + * Once the ease is registered, it can be accessed directly on the `gsap` animations. + * + * @example + * + * ```ts + * { + * registerEases: [ + * { + * name: 'customEase', + * ease: progress => { + * return progress // linear + * }, + * } + * ] + * } + * ``` + * + * @default undefined + * + * @since 2.2.0 + */ + registerEases?: { name: string; ease: { (progress: number): number } }[] } declare module '@nuxt/schema' {