@hypernym/nuxt-gsap
Advanced tools
@hypernym/nuxt-gsap - npm Package Compare versions
Comparing version 2.1.0 to 2.2.0
@@ -88,2 +88,70 @@ import * as _nuxt_schema from '@nuxt/schema'; | ||
| clubPlugins?: ClubPlugins; | ||
| /** | ||
| * Provides an easy way to register global effects. | ||
| * | ||
| * Once the effect is registered, it can be accessed directly on the `gsap.effects` object. | ||
| * | ||
| * To avoid possible linting warnings, use `// @ts-ignore` and `// eslint-disable-next-line` comments. | ||
| * | ||
| * @example | ||
| * | ||
| * ```ts | ||
| * { | ||
| * registerEffects: [ | ||
| * { | ||
| * name: 'fade', | ||
| * defaults: { | ||
| * y: -100, | ||
| * opacity: 0, | ||
| * duration: 2 | ||
| * }, | ||
| * // eslint-disable-next-line | ||
| * // ts-ignore | ||
| * effect: (targets, config) => { | ||
| * return gsap.to(targets, { | ||
| * y: config.y, | ||
| * opacity: config.opacity, | ||
| * duration: config.duration | ||
| * }) | ||
| * } | ||
| * } | ||
| * ] | ||
| * } | ||
| * ``` | ||
| * | ||
| * @default undefined | ||
| * | ||
| * @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; | ||
| }; | ||
| }[]; | ||
| } | ||
@@ -90,0 +158,0 @@ declare module '@nuxt/schema' { |
| { | ||
| "name": "@hypernym/nuxt-gsap", | ||
| "version": "2.1.0", | ||
| "version": "2.2.0", | ||
| "configKey": "gsap", | ||
@@ -5,0 +5,0 @@ "compatibility": { |
| { | ||
| "name": "@hypernym/nuxt-gsap", | ||
| "version": "2.1.0", | ||
| "version": "2.2.0", | ||
| "author": "Hypernym Studio", | ||
@@ -49,6 +49,6 @@ "description": "GSAP module for Nuxt.", | ||
| "@nuxt/module-builder": "^0.3.1", | ||
| "@types/node": "^18.16.3", | ||
| "@types/node": "^18.16.5", | ||
| "@typescript-eslint/eslint-plugin": "^5.59.2", | ||
| "@typescript-eslint/parser": "^5.59.2", | ||
| "eslint": "^8.39.0", | ||
| "eslint": "^8.40.0", | ||
| "eslint-config-prettier": "^8.8.0", | ||
@@ -55,0 +55,0 @@ "nuxt": "^3.4.3", |
154
README.md
@@ -9,4 +9,4 @@ # Nuxt Gsap Module | ||
| - Provides a solution for global use | ||
| - Enables plugins with a simple boolean option | ||
| - Automatically registers plugins after activation | ||
| - Allows you to easily register global effects & eases | ||
| - Supports Club GreenSock premium plugins | ||
@@ -39,6 +39,4 @@ - Zero-config setup ready to go | ||
| Nuxt Gsap Module is completely rewritten in TypeScript. It also improves the development experience with detailed descriptions, examples and code auto-completion. | ||
| The module comes with a zero-config setup so after activation it automatically adds the GSAP core and it is globally available without additional settings. | ||
| The module comes with a _zero-config_ setup so after activation it automatically adds the GSAP core and it is globally available without additional settings. | ||
| ```html | ||
@@ -64,5 +62,5 @@ <!-- layout.vue | page.vue | component.vue --> | ||
| It is very easy to activate additional plugins using the module options. | ||
| Nuxt Gsap Module is completely rewritten in TypeScript. It also improves the development experience with detailed descriptions, examples and code auto-completion. | ||
| When a specific plugin is activated, it is instantly available for global use so there is no need to manually import or register plugins. | ||
| After plugin activation, it is immediately available globally, so there is no need to manually import or register. | ||
@@ -83,4 +81,2 @@ ```ts | ||
| - Default: `true` | ||
| GSAP core is enabled by default on module activation. | ||
@@ -99,3 +95,2 @@ | ||
| ```ts | ||
| // Access GSAP by using | ||
| const { $gsap } = useNuxtApp() | ||
@@ -112,2 +107,3 @@ | ||
| - Type: `boolean` | ||
| - Default: `undefined` | ||
@@ -130,3 +126,2 @@ | ||
| ```ts | ||
| // Access the plugin by using | ||
| const { $Flip } = useNuxtApp() | ||
@@ -137,2 +132,3 @@ ``` | ||
| - Type: `boolean` | ||
| - Default: `undefined` | ||
@@ -155,3 +151,2 @@ | ||
| ```ts | ||
| // Access the plugin by using | ||
| const { $ScrollTrigger } = useNuxtApp() | ||
@@ -162,2 +157,3 @@ ``` | ||
| - Type: `boolean` | ||
| - Default: `undefined` | ||
@@ -180,3 +176,2 @@ | ||
| ```ts | ||
| // Access the plugin by using | ||
| const { $Observer } = useNuxtApp() | ||
@@ -187,2 +182,3 @@ ``` | ||
| - Type: `boolean` | ||
| - Default: `undefined` | ||
@@ -205,3 +201,2 @@ | ||
| ```ts | ||
| // Access the plugin by using | ||
| const { $ScrollToPlugin } = useNuxtApp() | ||
@@ -212,2 +207,3 @@ ``` | ||
| - Type: `boolean` | ||
| - Default: `undefined` | ||
@@ -230,3 +226,2 @@ | ||
| ```ts | ||
| // Access the plugin by using | ||
| const { $Draggable } = useNuxtApp() | ||
@@ -237,2 +232,3 @@ ``` | ||
| - Type: `boolean` | ||
| - Default: `undefined` | ||
@@ -255,3 +251,2 @@ | ||
| ```ts | ||
| // Access the plugin by using | ||
| const { $EaselPlugin } = useNuxtApp() | ||
@@ -262,2 +257,3 @@ ``` | ||
| - Type: `boolean` | ||
| - Default: `undefined` | ||
@@ -280,3 +276,2 @@ | ||
| ```ts | ||
| // Access the plugin by using | ||
| const { $MotionPathPlugin } = useNuxtApp() | ||
@@ -287,2 +282,3 @@ ``` | ||
| - Type: `boolean` | ||
| - Default: `undefined` | ||
@@ -305,3 +301,2 @@ | ||
| ```ts | ||
| // Access the plugin by using | ||
| const { $PixiPlugin } = useNuxtApp() | ||
@@ -312,2 +307,3 @@ ``` | ||
| - Type: `boolean` | ||
| - Default: `undefined` | ||
@@ -330,3 +326,2 @@ | ||
| ```ts | ||
| // Access the plugin by using | ||
| const { $TextPlugin } = useNuxtApp() | ||
@@ -341,2 +336,3 @@ ``` | ||
| - Type: `boolean` | ||
| - Default: `undefined` | ||
@@ -359,3 +355,2 @@ | ||
| ```ts | ||
| // Access the plugin by using | ||
| const { $ExpoScaleEase } = useNuxtApp() | ||
@@ -366,2 +361,3 @@ ``` | ||
| - Type: `boolean` | ||
| - Default: `undefined` | ||
@@ -384,3 +380,2 @@ | ||
| ```ts | ||
| // Access the plugin by using | ||
| const { $RoughEase } = useNuxtApp() | ||
@@ -391,2 +386,3 @@ ``` | ||
| - Type: `boolean` | ||
| - Default: `undefined` | ||
@@ -409,3 +405,2 @@ | ||
| ```ts | ||
| // Access the plugin by using | ||
| const { $SlowMo } = useNuxtApp() | ||
@@ -416,2 +411,3 @@ ``` | ||
| - Type: `boolean` | ||
| - Default: `undefined` | ||
@@ -434,6 +430,96 @@ | ||
| ```ts | ||
| // Access the plugin by using | ||
| const { $CustomEase } = useNuxtApp() | ||
| ``` | ||
| ## Register Effects | ||
| - Type: `object[]` | ||
| - Default: `undefined` | ||
| Provides an easy way to register global effects. | ||
| Once the effect is registered, it can be accessed directly on the `gsap.effects` object. | ||
| To avoid possible linting warnings, use `// eslint-disable-next-line` and `// @ts-ignore` comments. | ||
| ```ts | ||
| // nuxt.config.ts | ||
| { | ||
| gsap: { | ||
| registerEffects: [ | ||
| { | ||
| name: 'fade', | ||
| defaults: { | ||
| y: -100, | ||
| opacity: 0, | ||
| duration: 2 | ||
| }, | ||
| // eslint-disable-next-line | ||
| // @ts-ignore | ||
| effect: (targets, config) => { | ||
| return gsap.to(targets, { | ||
| y: config.y, | ||
| opacity: config.opacity, | ||
| duration: config.duration | ||
| }) | ||
| } | ||
| }, | ||
| { | ||
| name: 'slideIn' | ||
| // ... | ||
| } | ||
| ] | ||
| } | ||
| } | ||
| ``` | ||
| **Available globally** | ||
| ```ts | ||
| const { $gsap } = useNuxtApp() | ||
| $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 | ||
@@ -451,2 +537,3 @@ | ||
| - Type: `boolean` | ||
| - Default: `undefined` | ||
@@ -469,3 +556,2 @@ | ||
| ```ts | ||
| // Access the plugin by using | ||
| const { $DrawSVGPlugin } = useNuxtApp() | ||
@@ -476,2 +562,3 @@ ``` | ||
| - Type: `boolean` | ||
| - Default: `undefined` | ||
@@ -494,3 +581,2 @@ | ||
| ```ts | ||
| // Access the plugin by using | ||
| const { $ScrollSmoother } = useNuxtApp() | ||
@@ -501,2 +587,3 @@ ``` | ||
| - Type: `boolean` | ||
| - Default: `undefined` | ||
@@ -519,3 +606,2 @@ | ||
| ```ts | ||
| // Access the plugin by using | ||
| const { $GSDevTools } = useNuxtApp() | ||
@@ -526,2 +612,3 @@ ``` | ||
| - Type: `boolean` | ||
| - Default: `undefined` | ||
@@ -544,3 +631,2 @@ | ||
| ```ts | ||
| // Access the plugin by using | ||
| const { $InertiaPlugin } = useNuxtApp() | ||
@@ -551,2 +637,3 @@ ``` | ||
| - Type: `boolean` | ||
| - Default: `undefined` | ||
@@ -569,3 +656,2 @@ | ||
| ```ts | ||
| // Access the plugin by using | ||
| const { $MorphSVGPlugin } = useNuxtApp() | ||
@@ -576,2 +662,3 @@ ``` | ||
| - Type: `boolean` | ||
| - Default: `undefined` | ||
@@ -594,3 +681,2 @@ | ||
| ```ts | ||
| // Access the plugin by using | ||
| const { $MotionPathHelper } = useNuxtApp() | ||
@@ -601,2 +687,3 @@ ``` | ||
| - Type: `boolean` | ||
| - Default: `undefined` | ||
@@ -619,3 +706,2 @@ | ||
| ```ts | ||
| // Access the plugin by using | ||
| const { $Physics2DPlugin } = useNuxtApp() | ||
@@ -626,2 +712,3 @@ ``` | ||
| - Type: `boolean` | ||
| - Default: `undefined` | ||
@@ -644,3 +731,2 @@ | ||
| ```ts | ||
| // Access the plugin by using | ||
| const { $PhysicsPropsPlugin } = useNuxtApp() | ||
@@ -651,2 +737,3 @@ ``` | ||
| - Type: `boolean` | ||
| - Default: `undefined` | ||
@@ -669,3 +756,2 @@ | ||
| ```ts | ||
| // Access the plugin by using | ||
| const { $ScrambleText } = useNuxtApp() | ||
@@ -676,2 +762,3 @@ ``` | ||
| - Type: `boolean` | ||
| - Default: `undefined` | ||
@@ -694,3 +781,2 @@ | ||
| ```ts | ||
| // Access the plugin by using | ||
| const { $SplitText } = useNuxtApp() | ||
@@ -701,2 +787,3 @@ ``` | ||
| - Type: `boolean` | ||
| - Default: `undefined` | ||
@@ -719,3 +806,2 @@ | ||
| ```ts | ||
| // Access the plugin by using | ||
| const { $CustomBounce } = useNuxtApp() | ||
@@ -726,2 +812,3 @@ ``` | ||
| - Type: `boolean` | ||
| - Default: `undefined` | ||
@@ -744,3 +831,2 @@ | ||
| ```ts | ||
| // Access the plugin by using | ||
| const { $CustomWiggle } = useNuxtApp() | ||
@@ -747,0 +833,0 @@ ``` |
Sorry, the diff of this file is not supported yet
Fixed alerts
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by21.99%
22208
- Lines of code
- increased by39.68%
352
- Number of lines in readme file
- increased by12.1%
797
- Number of medium supply chain risk alerts
- decreased by-100%
0