Skip to content

Files

Latest commit

 

History

History

club-plugins

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 

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
// nuxt.config.ts

{
  gsap: {
    clubPlugins: {
      drawSvg: true
    }
  }
}

Available globally

const { $DrawSVGPlugin } = useNuxtApp()

useDrawSVGPlugin

  • Custom composable
// nuxt.config.ts

{
  gsap: {
    composables: true,
    clubPlugins: {
      drawSvg: true
    }
  }
}

Usage

useDrawSVGPlugin
// Explicit import (optional)
import { useDrawSVGPlugin } from '#gsap'

ScrollSmoother

  • Type: boolean
  • Default: undefined
// nuxt.config.ts

{
  gsap: {
    clubPlugins: {
      scrollSmoother: true
    }
  }
}

Available globally

const { $ScrollSmoother } = useNuxtApp()

useScrollSmoother

  • Custom composable
// nuxt.config.ts

{
  gsap: {
    composables: true,
    clubPlugins: {
      scrollSmoother: true
    }
  }
}

Usage

useScrollSmoother
// Explicit import (optional)
import { useScrollSmoother } from '#gsap'

GsDevTools

  • Type: boolean
  • Default: undefined
// nuxt.config.ts

{
  gsap: {
    clubPlugins: {
      gsDevTools: true
    }
  }
}

Available globally

const { $GSDevTools } = useNuxtApp()

useGSDevTools

  • Custom composable
// nuxt.config.ts

{
  gsap: {
    composables: true,
    clubPlugins: {
      gsDevTools: true
    }
  }
}

Usage

useGSDevTools
// Explicit import (optional)
import { useGSDevTools } from '#gsap'

Inertia

  • Type: boolean
  • Default: undefined
// nuxt.config.ts

{
  gsap: {
    clubPlugins: {
      inertia: true
    }
  }
}

Available globally

const { $InertiaPlugin } = useNuxtApp()

useInertiaPlugin

  • Custom composable
// nuxt.config.ts

{
  gsap: {
    composables: true,
    clubPlugins: {
      inertia: true
    }
  }
}

Usage

useInertiaPlugin
// Explicit import (optional)
import { useInertiaPlugin } from '#gsap'

MorphSvg

  • Type: boolean
  • Default: undefined
// nuxt.config.ts

{
  gsap: {
    clubPlugins: {
      morphSvg: true
    }
  }
}

Available globally

const { $MorphSVGPlugin } = useNuxtApp()

useMorphSVGPlugin

  • Custom composable
// nuxt.config.ts

{
  gsap: {
    composables: true,
    clubPlugins: {
      morphSvg: true
    }
  }
}

Usage

useMorphSVGPlugin
// Explicit import (optional)
import { useMorphSVGPlugin } from '#gsap'

MotionPathHelper

  • Type: boolean
  • Default: undefined
// nuxt.config.ts

{
  gsap: {
    clubPlugins: {
      motionPathHelper: true
    }
  }
}

Available globally

const { $MotionPathHelper } = useNuxtApp()

useMotionPathHelper

  • Custom composable
// nuxt.config.ts

{
  gsap: {
    composables: true,
    clubPlugins: {
      motionPathHelper: true
    }
  }
}

Usage

useMotionPathHelper
// Explicit import (optional)
import { useMotionPathHelper } from '#gsap'

Physics2d

  • Type: boolean
  • Default: undefined
// nuxt.config.ts

{
  gsap: {
    clubPlugins: {
      physics2d: true
    }
  }
}

Available globally

const { $Physics2DPlugin } = useNuxtApp()

usePhysics2DPlugin

  • Custom composable
// nuxt.config.ts

{
  gsap: {
    composables: true,
    clubPlugins: {
      physics2d: true
    }
  }
}

Usage

usePhysics2DPlugin
// Explicit import (optional)
import { usePhysics2DPlugin } from '#gsap'

PhysicsProps

  • Type: boolean
  • Default: undefined
// nuxt.config.ts

{
  gsap: {
    clubPlugins: {
      physicsProps: true
    }
  }
}

Available globally

const { $PhysicsPropsPlugin } = useNuxtApp()

usePhysicsPropsPlugin

  • Custom composable
// nuxt.config.ts

{
  gsap: {
    composables: true,
    clubPlugins: {
      physicsProps: true
    }
  }
}

Usage

usePhysicsPropsPlugin
// Explicit import (optional)
import { usePhysicsPropsPlugin } from '#gsap'

ScrambleText

  • Type: boolean
  • Default: undefined
// nuxt.config.ts

{
  gsap: {
    clubPlugins: {
      scrambleText: true
    }
  }
}

Available globally

const { $ScrambleText } = useNuxtApp()

useScrambleText

  • Custom composable
// nuxt.config.ts

{
  gsap: {
    composables: true,
    clubPlugins: {
      scrambleText: true
    }
  }
}

Usage

useScrambleText
// Explicit import (optional)
import { useScrambleText } from '#gsap'

SplitText

  • Type: boolean
  • Default: undefined
// nuxt.config.ts

{
  gsap: {
    clubPlugins: {
      splitText: true
    }
  }
}

Available globally

const { $SplitText } = useNuxtApp()

useSplitText

  • Custom composable
// nuxt.config.ts

{
  gsap: {
    composables: true,
    clubPlugins: {
      splitText: true
    }
  }
}

Usage

useSplitText
// Explicit import (optional)
import { useSplitText } from '#gsap'

CustomBounce

  • Type: boolean
  • Default: undefined
// nuxt.config.ts

{
  gsap: {
    clubPlugins: {
      customBounce: true
    }
  }
}

Available globally

const { $CustomBounce } = useNuxtApp()

useCustomBounce

  • Custom composable
// nuxt.config.ts

{
  gsap: {
    composables: true,
    clubPlugins: {
      customBounce: true
    }
  }
}

Usage

useCustomBounce
// Explicit import (optional)
import { useCustomBounce } from '#gsap'

CustomWiggle

  • Type: boolean
  • Default: undefined
// nuxt.config.ts

{
  gsap: {
    clubPlugins: {
      customWiggle: true
    }
  }
}

Available globally

const { $CustomWiggle } = useNuxtApp()

useCustomWiggle

  • Custom composable
// nuxt.config.ts

{
  gsap: {
    composables: true,
    clubPlugins: {
      customWiggle: true
    }
  }
}

Usage

useCustomWiggle
// Explicit import (optional)
import { useCustomWiggle } from '#gsap'