Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@hypernym/nuxt-gsap

Package Overview
Dependencies
Maintainers
2
Versions
12
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@hypernym/nuxt-gsap - npm Package Compare versions

Comparing version 2.4.0 to 2.4.1

2

dist/module.json
{
"name": "@hypernym/nuxt-gsap",
"version": "2.4.0",
"version": "2.4.1",
"configKey": "gsap",

@@ -5,0 +5,0 @@ "compatibility": {

2

package.json
{
"name": "@hypernym/nuxt-gsap",
"version": "2.4.0",
"version": "2.4.1",
"author": "Hypernym Studio",

@@ -5,0 +5,0 @@ "description": "GSAP module for Nuxt.",

1476

README.md

@@ -154,1478 +154,6 @@ # Nuxt Gsap Module

## Provide
## Documentation
- Type: `boolean`
- Default: `true`
Check the official [docs](./docs) for more info.
Provides the main `$gsap` core with plugins globally.
```ts
// nuxt.config.ts
{
gsap: {
provide: true
}
}
```
**Available globally**
```ts
const { $gsap } = useNuxtApp()
$gsap.to('.class', { rotation: 3, x: 100, duration: 1 })
```
## Composables
- Type: `boolean`
- Default: `undefined`
Specifies custom composables.
If enabled, allows the use of custom composables.
```ts
// nuxt.config.ts
{
gsap: {
composables: true
}
}
```
It is possible to use _provide_ helper and _composables_ in combination or separately, depending on preference.
When using _only_ composables, it is recommended to disable global import.
```ts
// nuxt.config.ts
{
gsap: {
composables: true
provide: false // global import
}
}
```
## Auto Import
- Type: `boolean`
- Default: `true`
Specifies the `auto-import` feature.
If enabled, the composables will be available globally so there is no need to import them manually.
Since this is an opinionated feature, you can disable global `auto-import` and use explicit import only where you need it.
> [!NOTE]\
> Works only if the option `composables: true` is enabled.
```ts
// nuxt.config.ts
{
gsap: {
autoImport: false
}
}
```
## 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' })
```
## Extra Plugins
- Type: `object`
- Default: `undefined`
Specifies GSAP extra plugins.
### Flip
- Type: `boolean`
- Default: `undefined`
```ts
// nuxt.config.ts
{
gsap: {
extraPlugins: {
flip: true
}
}
}
```
**Available globally**
```ts
const { $Flip } = useNuxtApp()
```
### useFlip
- Custom composable
```ts
// nuxt.config.ts
{
gsap: {
composables: true,
extraPlugins: {
flip: true
}
}
}
```
**Usage**
```ts
useFlip
```
```ts
// Explicit import (optional)
import { useFlip } from '#gsap'
```
### ScrollTrigger
- Type: `boolean`
- Default: `undefined`
```ts
// nuxt.config.ts
{
gsap: {
extraPlugins: {
scrollTrigger: true
}
}
}
```
**Available globally**
```ts
const { $ScrollTrigger } = useNuxtApp()
```
### useScrollTrigger
- Custom composable
```ts
// nuxt.config.ts
{
gsap: {
composables: true,
extraPlugins: {
scrollTrigger: true
}
}
}
```
**Usage**
```ts
useScrollTrigger
```
```ts
// Explicit import (optional)
import { useScrollTrigger } from '#gsap'
```
### Observer
- Type: `boolean`
- Default: `undefined`
```ts
// nuxt.config.ts
{
gsap: {
extraPlugins: {
observer: true
}
}
}
```
**Available globally**
```ts
const { $Observer } = useNuxtApp()
```
### useObserver
- Custom composable
```ts
// nuxt.config.ts
{
gsap: {
composables: true,
extraPlugins: {
observer: true
}
}
}
```
**Usage**
```ts
useObserver
```
```ts
// Explicit import (optional)
import { useObserver } from '#gsap'
```
### ScrollTo
- Type: `boolean`
- Default: `undefined`
```ts
// nuxt.config.ts
{
gsap: {
extraPlugins: {
scrollTo: true
}
}
}
```
**Available globally**
```ts
const { $ScrollToPlugin } = useNuxtApp()
```
### useScrollToPlugin
- Custom composable
```ts
// nuxt.config.ts
{
gsap: {
composables: true,
extraPlugins: {
scrollTo: true
}
}
}
```
**Usage**
```ts
useScrollToPlugin
```
```ts
// Explicit import (optional)
import { useScrollToPlugin } from '#gsap'
```
### Draggable
- Type: `boolean`
- Default: `undefined`
```ts
// nuxt.config.ts
{
gsap: {
extraPlugins: {
draggable: true
}
}
}
```
**Available globally**
```ts
const { $Draggable } = useNuxtApp()
```
### useDraggable
- Custom composable
```ts
// nuxt.config.ts
{
gsap: {
composables: true,
extraPlugins: {
draggable: true
}
}
}
```
**Usage**
```ts
useDraggable
```
```ts
// Explicit import (optional)
import { useDraggable } from '#gsap'
```
### Easel
- Type: `boolean`
- Default: `undefined`
```ts
// nuxt.config.ts
{
gsap: {
extraPlugins: {
easel: true
}
}
}
```
**Available globally**
```ts
const { $EaselPlugin } = useNuxtApp()
```
### useEaselPlugin
- Custom composable
```ts
// nuxt.config.ts
{
gsap: {
composables: true,
extraPlugins: {
easel: true
}
}
}
```
**Usage**
```ts
useEaselPlugin
```
```ts
// Explicit import (optional)
import { useEaselPlugin } from '#gsap'
```
### MotionPath
- Type: `boolean`
- Default: `undefined`
```ts
// nuxt.config.ts
{
gsap: {
extraPlugins: {
motionPath: true
}
}
}
```
**Available globally**
```ts
const { $MotionPathPlugin } = useNuxtApp()
```
### useMotionPathPlugin
- Custom composable
```ts
// nuxt.config.ts
{
gsap: {
composables: true,
extraPlugins: {
motionPath: true
}
}
}
```
**Usage**
```ts
useMotionPathPlugin
```
```ts
// Explicit import (optional)
import { useMotionPathPlugin } from '#gsap'
```
### Pixi
- Type: `boolean`
- Default: `undefined`
```ts
// nuxt.config.ts
{
gsap: {
extraPlugins: {
pixi: true
}
}
}
```
**Available globally**
```ts
const { $PixiPlugin } = useNuxtApp()
```
### usePixiPlugin
- Custom composable
```ts
// nuxt.config.ts
{
gsap: {
composables: true,
extraPlugins: {
pixi: true
}
}
}
```
**Usage**
```ts
usePixiPlugin
```
```ts
// Explicit import (optional)
import { usePixiPlugin } from '#gsap'
```
### Text
- Type: `boolean`
- Default: `undefined`
```ts
// nuxt.config.ts
{
gsap: {
extraPlugins: {
text: true
}
}
}
```
**Available globally**
```ts
const { $TextPlugin } = useNuxtApp()
```
### useTextPlugin
- Custom composable
```ts
// nuxt.config.ts
{
gsap: {
composables: true,
extraPlugins: {
text: true
}
}
}
```
**Usage**
```ts
useTextPlugin
```
```ts
// Explicit import (optional)
import { useTextPlugin } from '#gsap'
```
## Extra Eases
- Type: `object`
- Default: `undefined`
Specifies GSAP extra eases.
### ExpoScale
- Type: `boolean`
- Default: `undefined`
```ts
// nuxt.config.ts
{
gsap: {
extraEases: {
expoScale: true
}
}
}
```
**Available globally**
```ts
const { $ExpoScaleEase } = useNuxtApp()
```
### useExpoScaleEase
- Custom composable
```ts
// nuxt.config.ts
{
gsap: {
composables: true,
extraEases: {
expoScale: true
}
}
}
```
**Usage**
```ts
useExpoScaleEase
```
```ts
// Explicit import (optional)
import { useExpoScaleEase } from '#gsap'
```
### Rough
- Type: `boolean`
- Default: `undefined`
```ts
// nuxt.config.ts
{
gsap: {
extraEases: {
rough: true
}
}
}
```
**Available globally**
```ts
const { $RoughEase } = useNuxtApp()
```
### useRoughEase
- Custom composable
```ts
// nuxt.config.ts
{
gsap: {
composables: true,
extraEases: {
rough: true
}
}
}
```
**Usage**
```ts
useRoughEase
```
```ts
// Explicit import (optional)
import { useRoughEase } from '#gsap'
```
### SlowMo
- Type: `boolean`
- Default: `undefined`
```ts
// nuxt.config.ts
{
gsap: {
extraEases: {
slowMo: true
}
}
}
```
**Available globally**
```ts
const { $SlowMo } = useNuxtApp()
```
### useSlowMo
- Custom composable
```ts
// nuxt.config.ts
{
gsap: {
composables: true,
extraEases: {
slowMo: true
}
}
}
```
**Usage**
```ts
useSlowMo
```
```ts
// Explicit import (optional)
import { useSlowMo } from '#gsap'
```
### Custom
- Type: `boolean`
- Default: `undefined`
```ts
// nuxt.config.ts
{
gsap: {
extraEases: {
custom: true
}
}
}
```
**Available globally**
```ts
const { $CustomEase } = useNuxtApp()
```
### useCustomEase
- Custom composable
```ts
// nuxt.config.ts
{
gsap: {
composables: true,
extraEases: {
custom: true
}
}
}
```
**Usage**
```ts
useCustomEase
```
```ts
// Explicit import (optional)
import { useCustomEase } from '#gsap'
```
## Club Plugins
- Type: `object`
- Default: `undefined`
Specifies GSAP premium plugins.
This is only available to club members as it requires a paid license.
Keep in mind that premium plugins must be installed according to the official GSAP guidelines before use.
For more information about club plugins, check the official pages.
### DrawSvg
- Type: `boolean`
- Default: `undefined`
```ts
// nuxt.config.ts
{
gsap: {
clubPlugins: {
drawSvg: true
}
}
}
```
**Available globally**
```ts
const { $DrawSVGPlugin } = useNuxtApp()
```
### useDrawSVGPlugin
- Custom composable
```ts
// nuxt.config.ts
{
gsap: {
composables: true,
clubPlugins: {
drawSvg: true
}
}
}
```
**Usage**
```ts
useDrawSVGPlugin
```
```ts
// Explicit import (optional)
import { useDrawSVGPlugin } from '#gsap'
```
### ScrollSmoother
- Type: `boolean`
- Default: `undefined`
```ts
// nuxt.config.ts
{
gsap: {
clubPlugins: {
scrollSmoother: true
}
}
}
```
**Available globally**
```ts
const { $ScrollSmoother } = useNuxtApp()
```
### useScrollSmoother
- Custom composable
```ts
// nuxt.config.ts
{
gsap: {
composables: true,
clubPlugins: {
scrollSmoother: true
}
}
}
```
**Usage**
```ts
useScrollSmoother
```
```ts
// Explicit import (optional)
import { useScrollSmoother } from '#gsap'
```
### GsDevTools
- Type: `boolean`
- Default: `undefined`
```ts
// nuxt.config.ts
{
gsap: {
clubPlugins: {
gsDevTools: true
}
}
}
```
**Available globally**
```ts
const { $GSDevTools } = useNuxtApp()
```
### useGSDevTools
- Custom composable
```ts
// nuxt.config.ts
{
gsap: {
composables: true,
clubPlugins: {
gsDevTools: true
}
}
}
```
**Usage**
```ts
useGSDevTools
```
```ts
// Explicit import (optional)
import { useGSDevTools } from '#gsap'
```
### Inertia
- Type: `boolean`
- Default: `undefined`
```ts
// nuxt.config.ts
{
gsap: {
clubPlugins: {
inertia: true
}
}
}
```
**Available globally**
```ts
const { $InertiaPlugin } = useNuxtApp()
```
### useInertiaPlugin
- Custom composable
```ts
// nuxt.config.ts
{
gsap: {
composables: true,
clubPlugins: {
inertia: true
}
}
}
```
**Usage**
```ts
useInertiaPlugin
```
```ts
// Explicit import (optional)
import { useInertiaPlugin } from '#gsap'
```
### MorphSvg
- Type: `boolean`
- Default: `undefined`
```ts
// nuxt.config.ts
{
gsap: {
clubPlugins: {
morphSvg: true
}
}
}
```
**Available globally**
```ts
const { $MorphSVGPlugin } = useNuxtApp()
```
### useMorphSVGPlugin
- Custom composable
```ts
// nuxt.config.ts
{
gsap: {
composables: true,
clubPlugins: {
morphSvg: true
}
}
}
```
**Usage**
```ts
useMorphSVGPlugin
```
```ts
// Explicit import (optional)
import { useMorphSVGPlugin } from '#gsap'
```
### MotionPathHelper
- Type: `boolean`
- Default: `undefined`
```ts
// nuxt.config.ts
{
gsap: {
clubPlugins: {
motionPathHelper: true
}
}
}
```
**Available globally**
```ts
const { $MotionPathHelper } = useNuxtApp()
```
### useMotionPathHelper
- Custom composable
```ts
// nuxt.config.ts
{
gsap: {
composables: true,
clubPlugins: {
motionPathHelper: true
}
}
}
```
**Usage**
```ts
useMotionPathHelper
```
```ts
// Explicit import (optional)
import { useMotionPathHelper } from '#gsap'
```
### Physics2d
- Type: `boolean`
- Default: `undefined`
```ts
// nuxt.config.ts
{
gsap: {
clubPlugins: {
physics2d: true
}
}
}
```
**Available globally**
```ts
const { $Physics2DPlugin } = useNuxtApp()
```
### usePhysics2DPlugin
- Custom composable
```ts
// nuxt.config.ts
{
gsap: {
composables: true,
clubPlugins: {
physics2d: true
}
}
}
```
**Usage**
```ts
usePhysics2DPlugin
```
```ts
// Explicit import (optional)
import { usePhysics2DPlugin } from '#gsap'
```
### PhysicsProps
- Type: `boolean`
- Default: `undefined`
```ts
// nuxt.config.ts
{
gsap: {
clubPlugins: {
physicsProps: true
}
}
}
```
**Available globally**
```ts
const { $PhysicsPropsPlugin } = useNuxtApp()
```
### usePhysicsPropsPlugin
- Custom composable
```ts
// nuxt.config.ts
{
gsap: {
composables: true,
clubPlugins: {
physicsProps: true
}
}
}
```
**Usage**
```ts
usePhysicsPropsPlugin
```
```ts
// Explicit import (optional)
import { usePhysicsPropsPlugin } from '#gsap'
```
### ScrambleText
- Type: `boolean`
- Default: `undefined`
```ts
// nuxt.config.ts
{
gsap: {
clubPlugins: {
scrambleText: true
}
}
}
```
**Available globally**
```ts
const { $ScrambleText } = useNuxtApp()
```
### useScrambleText
- Custom composable
```ts
// nuxt.config.ts
{
gsap: {
composables: true,
clubPlugins: {
scrambleText: true
}
}
}
```
**Usage**
```ts
useScrambleText
```
```ts
// Explicit import (optional)
import { useScrambleText } from '#gsap'
```
### SplitText
- Type: `boolean`
- Default: `undefined`
```ts
// nuxt.config.ts
{
gsap: {
clubPlugins: {
splitText: true
}
}
}
```
**Available globally**
```ts
const { $SplitText } = useNuxtApp()
```
### useSplitText
- Custom composable
```ts
// nuxt.config.ts
{
gsap: {
composables: true,
clubPlugins: {
splitText: true
}
}
}
```
**Usage**
```ts
useSplitText
```
```ts
// Explicit import (optional)
import { useSplitText } from '#gsap'
```
### CustomBounce
- Type: `boolean`
- Default: `undefined`
```ts
// nuxt.config.ts
{
gsap: {
clubPlugins: {
customBounce: true
}
}
}
```
**Available globally**
```ts
const { $CustomBounce } = useNuxtApp()
```
### useCustomBounce
- Custom composable
```ts
// nuxt.config.ts
{
gsap: {
composables: true,
clubPlugins: {
customBounce: true
}
}
}
```
**Usage**
```ts
useCustomBounce
```
```ts
// Explicit import (optional)
import { useCustomBounce } from '#gsap'
```
### CustomWiggle
- Type: `boolean`
- Default: `undefined`
```ts
// nuxt.config.ts
{
gsap: {
clubPlugins: {
customWiggle: true
}
}
}
```
**Available globally**
```ts
const { $CustomWiggle } = useNuxtApp()
```
### useCustomWiggle
- Custom composable
```ts
// nuxt.config.ts
{
gsap: {
composables: true,
clubPlugins: {
customWiggle: true
}
}
}
```
**Usage**
```ts
useCustomWiggle
```
```ts
// Explicit import (optional)
import { useCustomWiggle } from '#gsap'
```
## Community

@@ -1632,0 +160,0 @@ 

dist/module.mjs

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc