Presets

For reoccuring animations you can define presets in nuxt.config.ts

Add option in config

To add a preset, create an array presets in the config options for vgsap

vgsap: {
    presets: []
  }

Add a preset

A preset is of the following type

{
    name: string;
    modifiers: string;
    value: any;
}

• name is what is used to access the preset later
• modifiers refers to whats usually the lefthand side of the directive entry.
  • only include what should follow after v-gsap., separated by .
• value is the actual parameter that is passed to the directive.

Here's an example of an actual preset:

vgsap: {
    presets: [
        {
            name: 'stagger-right',
            modifiers: 'whenVisible.stagger.once.from',
            value: { autoAlpha: 0, x: -32 }
        }
    ]
}

For better understanding - this is what the above preset represents:

<div v-gsap.whenVisible.stagger.once.from="{ autoAlpha: 0, x: -32 }"></div>

Use the preset

To use a preset, simply access it via the modifier .preset with the value being the name of the preset:

<div v-gsap.preset="'stagger-right'"></div>