hypernym-studio / nuxt-gsap

GSAP module for Nuxt.
MIT License
292 stars 12 forks source link

feat: add new `registerEffects` option #43

Closed ivodolenc closed 1 year ago

ivodolenc commented 1 year ago

Type of Change

Request Description

Adds new registerEffects option that provides an easy way to register global effects.

Register Effects

// 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

const { $gsap } = useNuxtApp()

$gsap.effects.fade('.class')
$gsap.effects.slideIn('#id')

Additional Details

It also updates the documentation.