### Start Development Server

Source: https://github.com/holux-design/v-gsap-nuxt/blob/main/docs/README.md

Runs the development server to preview your Docus site locally.

```bash
yarn dev
```

--------------------------------

### Manually Install v-gsap-nuxt (npm)

Source: https://github.com/holux-design/v-gsap-nuxt/blob/main/docs/content/1.installation/1.getting-started.md

Install the v-gsap-nuxt package using npm. This is the first step for manual installation.

```bash
npm i v-gsap-nuxt
```

--------------------------------

### Install Dependencies

Source: https://github.com/holux-design/v-gsap-nuxt/blob/main/docs/README.md

Installs project dependencies using Yarn.

```bash
yarn install
```

--------------------------------

### v-gsap.fromTo Example

Source: https://context7.com/holux-design/v-gsap-nuxt/llms.txt

Define explicit start and end states for animations. The directive value must be an array of two tween-vars objects.

```vue
<template>
  <!-- Scale and fade from 0→1 -->
  <div
    v-gsap.fromTo="[
      { scale: 0, opacity: 0 },
      { scale: 1, opacity: 1, duration: 0.6, ease: 'back.out(1.7)' }
    ]"
  >
    Pop in
  </div>

  <!-- Combined with whenVisible + once for a scroll-triggered entrance -->
  <section
    v-gsap.whenVisible.once.fromTo="[
      { x: 80, opacity: 0 },
      { x: 0, opacity: 1, duration: 0.9, ease: 'power3.out', start: 'top 85%' }
    ]"
  >
    Scroll to reveal
  </section>
</template>
```

--------------------------------

### v-gsap.from, .to, .set Examples

Source: https://context7.com/holux-design/v-gsap-nuxt/llms.txt

Animate elements from a state, to a state, or set properties instantly. Use these directives for basic element animations on mount.

```vue
<template>
  <!-- Fade + slide in from left on mount -->
  <h1 v-gsap.from="{ x: -60, opacity: 0, duration: 0.8, ease: 'power2.out' }">
    Hello World
  </h1>

  <!-- Animate to a target state on mount -->
  <div v-gsap.to="{ rotation: 360, duration: 1.5, ease: 'elastic.out(1, 0.3)' }">
    Spinning box
  </div>

  <!-- Immediately set (no animation) -->
  <span v-gsap.set="{ opacity: 0, x: -20 }">Hidden initially</span>
</template>
```

--------------------------------

### Install v-gsap-nuxt for Vue (standalone)

Source: https://context7.com/holux-design/v-gsap-nuxt/llms.txt

Install the package using npm. Then, register the `vGsapVue` directive in your main Vue application file.

```bash
npm i v-gsap-nuxt
```

```typescript
// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import { vGsapVue } from 'v-gsap-nuxt/vue'

const app = createApp(App)

app.directive('gsap', vGsapVue({
  presets: [],
  breakpoint: 768,
  scroller: '',
}))

app.mount('#app')
```

--------------------------------

### Local Development Commands

Source: https://github.com/holux-design/v-gsap-nuxt/blob/main/README.md

Commands for setting up local development, including installing dependencies, preparing types, running the playground or docs, building the playground, checking code quality, and releasing new versions.

```bash
# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev:playground
# OR
# Develop with the Docs
npm run dev:docs

# Build the playground
npm run dev:build

# Run ESLint
npm run dev:check

# Release new version
npm run release
```

--------------------------------

### Full GSAPTransition Example with Custom Properties

Source: https://github.com/holux-design/v-gsap-nuxt/blob/main/docs/content/2.usage/7.v-if.md

Demonstrates a comprehensive usage of GSAPTransition with custom duration, delay, appear animation, ease, and hidden properties.

```vue
<GSAPTransition
  :hidden="{ x: -32 }"
  :duration="1"
  :delay="0.75"
  :appear="true"
  ease="bounce.out"
>
  <div v-if="visible">Hello World</div>
</GSAPTransition>
```

--------------------------------

### Advanced SplitText Customization Example

Source: https://github.com/holux-design/v-gsap-nuxt/blob/main/docs/content/2.usage/8.splittext.md

Demonstrates advanced SplitText configuration with custom class names and specifying the HTML tag for split words.

```vue
<h1 v-gsap.splitText.words.from="{
  opacity: 0,
  x: -50,
  stagger: 0.15,
  splitText: {
    reduceWhiteSpace: true,
    wordsClass: 'split-word',
    tag: 'span'
  }
}">
  Advanced Configuration Example
</h1>
```

--------------------------------

### v-gsap Inline Animation Syntax Example

Source: https://github.com/holux-design/v-gsap-nuxt/blob/main/docs/content/1.installation/3.Philosophy.md

Demonstrates the readable and writeable inline format for defining animations with v-gsap. This syntax aims to break down everyday animations into a comfortable structure.

```javascript
v-gsap.whenVisible.stagger.once.from=...
```

--------------------------------

### Manually Install v-gsap-nuxt (nuxt.config.ts)

Source: https://github.com/holux-design/v-gsap-nuxt/blob/main/docs/content/1.installation/1.getting-started.md

Add 'v-gsap-nuxt' to the modules array in your nuxt.config.ts file to enable the module.

```typescript
modules: [
  'v-gsap-nuxt'
]
```

--------------------------------

### Entrance with Custom Start/End Points

Source: https://github.com/holux-design/v-gsap-nuxt/blob/main/docs/content/2.usage/2.examples.md

Define custom scroll trigger start and end points for entrance animations using `start` and `end` properties.

```vue
<div
  v-gsap.whenVisible.from="{
    opacity: 0,
    start: 'top 50%',
    end: 'bottom 50%',
  }"
></div>
```

--------------------------------

### Pinned Timeline Animation Configuration

Source: https://github.com/holux-design/v-gsap-nuxt/blob/main/docs/content/2.usage/5.timeline.md

Configure pinned timelines using 'start' and 'end' properties to control when the animation is pinned and for how long.

```vue
<div v-gsap.timeline.pinned="{ start: 'top top', end: '+=1200px' }"></div>
```

--------------------------------

### Using the `useGSAP()` Composable for Scripted Animations

Source: https://context7.com/holux-design/v-gsap-nuxt/llms.txt

Access the shared GSAP instance within `<script setup>` for complex animations or when the directive is insufficient. Allows direct GSAP API usage and plugin registration.

```vue
<script setup>
import { ref, onMounted } from 'vue'

const box = ref(null)

onMounted(() => {
  // Direct GSAP animations
  useGSAP().to(box.value, { rotation: 360, duration: 1.5, ease: 'elastic.out' })
  useGSAP().from('.hero-title', { y: -60, opacity: 0, duration: 0.8 })
})

// Register additional GSAP plugins
import { RoughEase } from 'gsap/EasePack'
onBeforeMount(() => {
  useGSAP().registerPlugin(RoughEase)
})
</script>

<template>
  <div ref="box" class="box">Animated from script</div>
</template>
```

--------------------------------

### v-gsap.whenVisible Examples

Source: https://context7.com/holux-design/v-gsap-nuxt/llms.txt

Trigger animations when an element scrolls into view, automatically wrapping GSAP's ScrollTrigger. Options include `once`, `fromInvisible`, `reversible`, custom `start`/`end`, `scrub`, and `markers`.

```vue
<template>
  <!-- Basic scroll-triggered fade from below -->
  <p v-gsap.whenVisible.from="{ y: 40, opacity: 0, duration: 0.7 }">
    Appears on scroll
  </p>

  <!-- Play only once, stay in final state on scroll-back -->
  <div v-gsap.whenVisible.once.fromInvisible.from="{ y: 32, duration: 0.5 }">
    One-shot entrance
  </div>

  <!-- Reverse on scroll-back (default legacy behavior) -->
  <div v-gsap.whenVisible.once.reversible.from="{ x: -32, opacity: 0 }">
    Reverses when scrolling back up
  </div>

  <!-- Custom start/end and scrub speed -->
  <div
    v-gsap.whenVisible.from="{
      y: 80, opacity: 0, duration: 1,
      start: 'top 95%',
      end: 'top 40%',
      scrub: 2
    }"
  >
    Custom scroll window
  </div>

  <!-- Debug with markers -->
  <div v-gsap.whenVisible.markers.from="{ scale: 0.8, opacity: 0 }">
    Debugging markers visible
  </div>
</template>
```

--------------------------------

### Add v-gsap-nuxt Module

Source: https://github.com/holux-design/v-gsap-nuxt/blob/main/docs/content/0.index.md

Install the v-gsap-nuxt module using npx to add GSAP animation capabilities to your Nuxt.js project.

```bash
npx nuxi module add v-gsap-nuxt
```

--------------------------------

### Add opacity: 0 and opacity: 1 states with v-gsap.fromInvisible

Source: https://context7.com/holux-design/v-gsap-nuxt/llms.txt

Use `.fromInvisible` to set the hidden state to `opacity: 0` and the visible state to `opacity: 1`. This prevents content from flashing before the animation starts. It's particularly useful for hero elements that appear above the fold.

```vue
<template>
  <!-- Element is invisible until directive runs, then fades+slides in -->
  <h1 v-gsap.fromInvisible.from="{ y: -30, duration: 0.8 }">
    Hero headline
  </h1>

  <!-- Combined with scroll trigger -->
  <div v-gsap.whenVisible.once.fromInvisible.from="{ scale: 0.9, duration: 0.6 }">
    Card reveal
  </div>
</template>
```

--------------------------------

### Initialize Docus Project

Source: https://github.com/holux-design/v-gsap-nuxt/blob/main/docs/README.md

Use this command to initialize a new Docus project from the themes/docus template.

```bash
npx nuxi init -t themes/docus
```

--------------------------------

### Build for Edge Side Rendering

Source: https://github.com/holux-design/v-gsap-nuxt/blob/main/docs/README.md

Builds the application for deployment to serverless environments like Vercel Functions or Netlify Functions.

```bash
yarn build
```

--------------------------------

### Preview Static Build

Source: https://github.com/holux-design/v-gsap-nuxt/blob/main/docs/README.md

Locally previews the static build generated by the `yarn generate` command.

```bash
yarn preview
```

--------------------------------

### Build for Static Generation

Source: https://github.com/holux-design/v-gsap-nuxt/blob/main/docs/README.md

Generates static HTML files for deployment to any static hosting provider. The output is placed in the .output/public directory.

```bash
yarn generate
```

--------------------------------

### Entrance Animation with `.entrance` Preset

Source: https://github.com/holux-design/v-gsap-nuxt/blob/main/docs/content/2.usage/2.examples.md

Utilize the `.entrance` modifier with a preset like `slide-left` for a predefined entrance animation.

```vue
<div v-gsap.entrance.slide-left></div>
```

--------------------------------

### Predefined Entrance Animations

Source: https://github.com/holux-design/v-gsap-nuxt/blob/main/docs/content/2.usage/3.modifiers.md

Use the `.entrance` modifier with predefined animations like `.slide-left`, `.fade`, or `.scale`. These modifiers apply common entrance effects and utilize `.whenVisible.once` internally.

```html
<!-- Slide in from left -->
<div v-gsap.entrance.slide-left>...</div>

<!-- Fade in -->
<div v-gsap.entrance.fade>...</div>

<!-- Scale and fade in -->
<div v-gsap.entrance.scale>...</div>
```

--------------------------------

### Entrance Animations with .fromInvisible

Source: https://github.com/holux-design/v-gsap-nuxt/blob/main/docs/content/2.usage/3.modifiers.md

Use .fromInvisible to add an initial opacity: 0 state and opacity: 1 to the target state, preventing elements from being visible before animation.

```typescript
v-gsap.fromInvisible.to={...}
```

--------------------------------

### Basic Fade-In Entrance

Source: https://github.com/holux-design/v-gsap-nuxt/blob/main/docs/content/2.usage/2.examples.md

Use `.whenVisible.from` to create a simple fade-in animation from the left when an element enters the viewport.

```vue
<div v-gsap.whenVisible.from="{ opacity: 0, x: -32 }"></div>
```

--------------------------------

### Create sequenced timelines with v-gsap.timeline and v-gsap.add

Source: https://context7.com/holux-design/v-gsap-nuxt/llms.txt

Compose multi-step animation timelines directly in the template using `.timeline` and `.add`. Animations are applied in DOM order by default. Use `.withPrevious` for parallel animations or `.order-N` to specify a custom sequence.

```vue
<template>
  <!-- Sequential steps in DOM order -->
  <section v-gsap.timeline>
    <h1 v-gsap.add.from="{ x: -32, opacity: 0, duration: 0.6 }">Title</h1>
    <p  v-gsap.add.from="{ y: 20,  opacity: 0, duration: 0.5 }">Body copy</p>
    <button v-gsap.add.from="{ scale: 0, duration: 0.4 }">CTA</button>
  </section>

  <!-- Scroll-triggered timeline -->
  <section v-gsap.timeline.whenVisible>
    <h2 v-gsap.add.fromInvisible.from="{ x: -48, duration: 0.7 }">Headline</h2>
    <img v-gsap.add.from="{ scale: 0.8, opacity: 0 }" src="/hero.jpg" />
  </section>

  <!-- Parallel steps with .withPrevious -->
  <div v-gsap.timeline>
    <h1 v-gsap.add.from="{ y: -20 }">Appears first</h1>
    <h2 v-gsap.add.withPrevious.from="{ y: -20 }">Appears at same time</h2>
  </div>

  <!-- Custom order via .order-N -->
  <section v-gsap.timeline>
    <h1 v-gsap.add.order-0.from="{ x: -32 }">First</h1>
    <span v-gsap.add.order-2.from="{ scale: 0 }">Third</span>
    <p   v-gsap.add.order-1.from="{ y: 20 }">Second</p>
  </section>

  <!-- Multiple steps on one element -->
  <div v-gsap.timeline>
    <h1
      v-gsap.add.fromInvisible.from="{ x: -32 }"
      v-gsap.add.to="{ scale: 1.2 }"
    >
      Two-step element
    </h1>
  </div>

  <!-- Pinned scrollytelling section -->
  <section v-gsap.timeline.pinned="{ start: 'top top', end: '+=1500px' }">
    <h2 v-gsap.add.from="{ opacity: 0, y: 40 }">Step 1</h2>
    <p  v-gsap.add.from="{ opacity: 0, x: -40 }">Step 2</p>
  </section>
</template>
```

--------------------------------

### Use built-in entrance presets with v-gsap.entrance

Source: https://context7.com/holux-design/v-gsap-nuxt/llms.txt

Leverage `.entrance` for pre-defined scroll-triggered animations. These presets internally use `.whenVisible.once`. Available presets include slide animations (left, right, top, bottom), fade, scale, and scale-full.

```vue
<template>
  <!-- Available presets: slide-left, slide-right, slide-top, slide-bottom, fade, scale, scale-full -->

  <h2 v-gsap.entrance.slide-left>Slides in from left</h2>
  <h2 v-gsap.entrance.slide-right>Slides in from right</h2>
  <h2 v-gsap.entrance.slide-top>Drops in from top</h2>
  <h2 v-gsap.entrance.slide-bottom>Rises from bottom</h2>
  <p  v-gsap.entrance.fade>Fades in</p>
  <div v-gsap.entrance.scale>Scales from 75%</div>
  <div v-gsap.entrance.scale-full>Scales from 0%</div>
</template>
```

--------------------------------

### Basic Animation Types in v-gsap

Source: https://github.com/holux-design/v-gsap-nuxt/blob/main/docs/content/2.usage/3.modifiers.md

Use .from, .to, .fromTo for animating between states, and .call for executing functions. .call with .whenVisible acts like .once.

```typescript
v-gsap.from={...}
v-gsap.to={...}
v-gsap.fromTo=[{...},{...}]
v-gsap.call(() => {...})
v-gsap.whenVisible.call(() => {...})
```

--------------------------------

### Staggered Entrance Animation for List Items

Source: https://github.com/holux-design/v-gsap-nuxt/blob/main/docs/content/2.usage/2.examples.md

Animate multiple list items sequentially as they enter the viewport using the `.stagger` modifier.

```html
<ul v-gsap.whenVisible.stagger>
  <li>Option 1</li>
  <li>Option 2</li>
  <li>Option 3</li>
</ul>
```

--------------------------------

### Parallel Animation Steps in a Timeline

Source: https://github.com/holux-design/v-gsap-nuxt/blob/main/docs/content/2.usage/5.timeline.md

Use the .withPrevious modifier to run an animation step concurrently with the preceding animation step in the timeline.

```html
<section v-gsap.timeline>
	<h1 v-gsap.add.from="{ x: -32 }">This runs at the</h1>
	<h2 v-gsap.add.withPrevious.from="{ x: -32 }">same time</h2>
</section>
```

--------------------------------

### Timeline Animation Triggered on Visibility

Source: https://github.com/holux-design/v-gsap-nuxt/blob/main/docs/content/2.usage/5.timeline.md

Combine .timeline with .whenVisible to create entrance animations that play only when the element becomes visible in the viewport.

```html
<section v-gsap.timeline.whenVisible>
	<h1 v-gsap.add.from="{ x: -32 }">Hello World</h1>
	<div v-gsap.add.from="{ scale: 0 }">They see me animating</div>
</section>
```

--------------------------------

### Debug Entrance Animations with Markers

Source: https://github.com/holux-design/v-gsap-nuxt/blob/main/docs/content/2.usage/2.examples.md

Enable scroll trigger markers for debugging entrance animations by adding the `.markers` modifier.

```vue
<div v-gsap.markers.whenVisible.from="{ opacity: 0, x: -32 }"></div>
```

--------------------------------

### Create hover animations with v-gsap.whileHover

Source: https://context7.com/holux-design/v-gsap-nuxt/llms.txt

Use the `.whileHover` directive to play an animation when the mouse enters an element and reverse it when the mouse leaves. Use `.noReverse` to prevent the animation from reversing on mouse leave, keeping the element in its final state.

```vue
<template>
  <!-- Reverses on leave (default) -->
  <button v-gsap.whileHover.to="{ scale: 1.1, duration: 0.2 }">
    Hover me
  </button>

  <!-- No reverse on leave — stays in final state -->
  <div v-gsap.whileHover.noReverse.to="{ backgroundColor: '#ff0000', duration: 0.3 }">
    Stays red after hover
  </div>
</template>
```

--------------------------------

### Basic Timeline Animation

Source: https://github.com/holux-design/v-gsap-nuxt/blob/main/docs/content/2.usage/5.timeline.md

Use .timeline on a parent element to group animations on its children. Animations are added using .add.

```html
<section v-gsap.timeline>
	<h1 v-gsap.add.from="{ x: -32 }">Hello World</h1>
	<div v-gsap.add.from="{ scale: 0 }">They see me animating</div>
</section>
```

--------------------------------

### Hover Animation (Basic)

Source: https://github.com/holux-design/v-gsap-nuxt/blob/main/docs/content/2.usage/2.examples.md

Animate an element to a target state when hovered using `.whileHover.to`.

```html
<div v-gsap.whileHover.to="{ scale: 1.1 }"></div>
```

--------------------------------

### Cursor Attraction with `.magnetic`

Source: https://context7.com/holux-design/v-gsap-nuxt/llms.txt

Make elements magnetically follow the cursor when it's nearby using the `.magnetic` directive. Strength modifiers like `.weak`, `.weaker`, `.stronger`, and `.strong` allow you to control the attraction force.

```vue
<template>
  <!-- Default strength -->
  <button v-gsap.magnetic>Hover near me</button>

  <!-- Strength modifiers: weak < weaker < default < stronger < strong -->
  <a v-gsap.magnetic.strong href="#">Strongly magnetic link</a>
  <div v-gsap.magnetic.weak>Weakly magnetic div</div>
</template>
```

--------------------------------

### Infinite Swaying Text Animation

Source: https://github.com/holux-design/v-gsap-nuxt/blob/main/docs/content/2.usage/8.splittext.md

Create an infinite animation where text sways up and down using `yoyo` and `repeat` with a character split.

```vue
<h1 v-gsap.splitText.chars.infinitely.fromTo="[
  { y: 0 },
  { y: -10, stagger: 0.1, yoyo: true, repeat: 1 }
]">
  Swaying text
</h1>
```

--------------------------------

### Desktop-Only Animation

Source: https://github.com/holux-design/v-gsap-nuxt/blob/main/docs/content/2.usage/2.examples.md

Apply an animation that only runs on desktop devices, with infinite repetition.

```html
<div v-gsap.desktop.infinitely.to="{ rotate: '90deg' }"></div>
```

--------------------------------

### Using useGSAP() Composable in Vue

Source: https://github.com/holux-design/v-gsap-nuxt/blob/main/docs/content/2.usage/6.composable.md

Use the `useGSAP()` composable within `onMounted` to perform GSAP animations from your script section. This is an alternative when the directive approach is not feasible.

```vue
<script setup>
onMounted(() => {
  useGSAP().to("<selector>", {
    props,
  });
});
</script>
```

--------------------------------

### Differing Mobile/Desktop Animations

Source: https://github.com/holux-design/v-gsap-nuxt/blob/main/docs/content/2.usage/2.examples.md

Apply different animations for desktop and mobile devices to the same element.

```html
<div
  v-gsap.desktop.infinitely.to="{ rotate: '90deg' }"
  v-gsap.mobile.infinitely.to="{ rotate: '-90deg' }"
></div>
```

--------------------------------

### One-Time Entrance Animation

Source: https://github.com/holux-design/v-gsap-nuxt/blob/main/docs/content/2.usage/2.examples.md

Use the `.once` modifier to ensure an entrance animation plays only a single time when the element becomes visible.

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

--------------------------------

### Add Presets Option to nuxt.config.ts

Source: https://github.com/holux-design/v-gsap-nuxt/blob/main/docs/content/2.usage/4.presets.md

To enable presets, add the `presets` array to the `vgsap` configuration in your `nuxt.config.ts` file. This array will hold your custom preset definitions.

```typescript
vgsap: {
		presets: []
	}
```

--------------------------------

### Responsive Text Animation with SplitText

Source: https://github.com/holux-design/v-gsap-nuxt/blob/main/docs/content/2.usage/8.splittext.md

Apply different SplitText animations based on screen size using .mobile and .desktop modifiers. Ensure the base element has the v-gsap directive.

```vue
<h1 
  v-gsap.splitText.chars.desktop.from="{ opacity: 0, y: 20, stagger: 0.05 }"
  v-gsap.splitText.words.mobile.from="{ opacity: 0, x: -20, stagger: 0.1 }"
>
  Different behavior on mobile and desktop
</h1>
```

--------------------------------

### Per-Character/Word/Line Animations with `.splitText`

Source: https://context7.com/holux-design/v-gsap-nuxt/llms.txt

Utilize GSAP's SplitText plugin with the `.splitText` directive for granular animations on characters, words, or lines. Modifiers like `.chars`, `.words`, `.lines`, and `.stagger` allow for complex effects. Custom SplitText options and callbacks can also be configured.

```vue
<template>
  <!-- Characters with stagger -->
  <h1 v-gsap.splitText.chars.stagger.from="{ opacity: 0, y: -30, duration: 0.5 }">
    Character by character
  </h1>

  <!-- Words with scroll trigger -->
  <p v-gsap.splitText.words.whenVisible.once.from="{ opacity: 0, x: -30, stagger: 0.1 }">
    Word by word on scroll
  </p>

  <!-- Lines with mask reveal effect -->
  <div v-gsap.splitText.mask.lines.from="{ y: '100%', stagger: 0.1, duration: 0.7 }">
    Each line rises from beneath a mask
  </div>

  <!-- Explosion effect -->
  <h2 v-gsap.splitText.chars.from="{
    opacity: 0,
    scale: 0,
    rotation: 'random(-180, 180)',
    stagger: 0.02
  }">
    KABOOM!
  </h2>

  <!-- fromTo with complex easing -->
  <h1 v-gsap.splitText.chars.fromTo="[
    { opacity: 0, scale: 0.5, rotation: -90 },
    { opacity: 1, scale: 1, rotation: 0, stagger: 0.08, ease: 'back.out(1.7)' }
  ]">
    Flip in
  </h1>

  <!-- Custom SplitText options + onSplit callback -->
  <h2 v-gsap.splitText.words.from="{
    opacity: 0, y: 24,
    splitText: {
      waitForFonts: true,
      wordsClass: 'split-word',
      onSplit: ({ el, split }) => console.log(split.words.length + ' words')
    }
  }">
    With callback
  </h2>

  <!-- Responsive: chars on desktop, words on mobile -->
  <h1
    v-gsap.splitText.chars.desktop.from="{ opacity: 0, y: 20, stagger: 0.05 }"
    v-gsap.splitText.words.mobile.from="{ opacity: 0, x: -20, stagger: 0.1 }"
  >
    Responsive split animation
  </h1>

  <!-- Inside a timeline -->
  <div v-gsap.timeline.whenVisible>
    <h1 v-gsap.add.splitText.chars.from="{ opacity: 0, y: -20, stagger: 0.05 }">
      Title
    </h1>
    <p v-gsap.add.splitText.words.from="{ opacity: 0, x: -30, stagger: 0.1 }">
      Subtitle follows after title completes
    </p>
  </div>
</template>

<script setup>
// Listen to the DOM event emitted after every split
const el = ref(null)
onMounted(() => {
  el.value?.addEventListener('vgsap:split', (e) => {
    const { split } = e.detail
    console.log('chars count:', split.chars.length)
  })
})
</script>
```

--------------------------------

### Custom SplitText Configuration

Source: https://github.com/holux-design/v-gsap-nuxt/blob/main/docs/content/2.usage/8.splittext.md

Configure SplitText behavior by passing a 'splitText' object with options like 'reduceWhiteSpace', 'wordDelimiter', and CSS class names for split elements.

```vue
<div v-gsap.splitText.chars.from="{
  opacity: 0,
  y: 20,
  stagger: 0.1,
  splitText: {
    reduceWhiteSpace: true,
    wordDelimiter: ' ',
    charsClass: 'char',
    wordsClass: 'word',
    linesClass: 'line'
  }
}">
  Text with custom configuration
</div>
```

--------------------------------

### Smooth Animation with Custom Fonts

Source: https://github.com/holux-design/v-gsap-nuxt/blob/main/docs/content/2.usage/8.splittext.md

Ensure accurate text measurements and smooth animations when using custom web fonts by setting `splitText.waitForFonts` to `true`.

```vue
<h1 v-gsap.splitText.chars.from="{ opacity: 0, y: 20, splitText: { waitForFonts: true } }">
  Smooth with custom fonts
</h1>
```

--------------------------------

### Animate Text with Custom Scroll Trigger and Value

Source: https://github.com/holux-design/v-gsap-nuxt/blob/main/docs/content/2.usage/2.examples.md

Configure custom scroll trigger points and the text content for the `.animateText` animation.

```html
<div v-gsap.whenVisible.animateText="{ start: 'top bottom', text: 'Lorem Ipsum...' }"></div>
```

--------------------------------

### Register Custom GSAP Plugin

Source: https://github.com/holux-design/v-gsap-nuxt/blob/main/docs/content/3.Information/1.gsap-plugins.md

Register a custom GSAP plugin, such as RoughEase from EasePack, using the useGSAP composable before the component mounts. This ensures the plugin is available for GSAP animations.

```vue
<script setup>
import { RoughEase } from 'gsap/EasePack'

onBeforeMount(() => {
  useGSAP().registerPlugin(RoughEase)
})
</script>
```

--------------------------------

### Multiple Animation Steps on a Single Element

Source: https://github.com/holux-design/v-gsap-nuxt/blob/main/docs/content/2.usage/5.timeline.md

Apply multiple animation steps to a single element within a timeline by using multiple v-gsap directives on that element.

```html
<section v-gsap.timeline>
	<h1 
		v-gsap.add.fromInvisible.from="{ x: -32 }"
		v-gsap.add.to="{ scale: 2 }">
		Hello World
	</h1>
</section>
```

--------------------------------

### Defining Reusable Animation Presets in `nuxt.config.ts`

Source: https://context7.com/holux-design/v-gsap-nuxt/llms.txt

Create custom animation shortcuts in your Nuxt configuration file for easy reuse across your application. Presets can define modifiers and animation values.

```typescript
// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['v-gsap-nuxt'],
  vgsap: {
    presets: [
      {
        name: 'stagger-right',
        modifiers: 'whenVisible.stagger.once.from',
        value: { autoAlpha: 0, x: -32 },
      },
      {
        name: 'pop-in',
        modifiers: 'whenVisible.once.fromTo',
        value: [{ scale: 0, opacity: 0 }, { scale: 1, opacity: 1, duration: 0.5 }],
      },
    ],
  },
})
```

--------------------------------

### Define a New Preset

Source: https://github.com/holux-design/v-gsap-nuxt/blob/main/docs/content/2.usage/4.presets.md

Define a preset by specifying its `name`, `modifiers`, and `value`. The `modifiers` string should include the directive parts that follow `v-gsap.`, and `value` is the animation configuration object.

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

--------------------------------

### SplitText Line Animation

Source: https://github.com/holux-design/v-gsap-nuxt/blob/main/docs/content/2.usage/2.examples.md

Animate multi-line text line by line when it enters the viewport, with a stagger effect and playing only once.

```vue
<div v-gsap.splitText.lines.whenVisible.once.from="{ opacity: 0, x: -50, stagger: 0.2 }">
  This is a multi-line text
  that animates line by line
  when it enters the viewport
</div>
```

--------------------------------

### Viewport-Conditional Animations with `.mobile` / `.desktop`

Source: https://context7.com/holux-design/v-gsap-nuxt/llms.txt

Restrict animations to specific viewport widths. The default breakpoint is 768px, but it can be configured. Use `.whenVisible` to combine with visibility.

```vue
<template>
  <!-- Only on desktop (≥768px) -->
  <div v-gsap.desktop.whenVisible.from="{ x: -60, opacity: 0 }">
    Desktop entrance
  </div>

  <!-- Only on mobile (<768px) -->
  <div v-gsap.mobile.from="{ y: 30, opacity: 0 }">
    Mobile entrance
  </div>

  <!-- Apply both (different animations per viewport) -->
  <h1
    v-gsap.desktop.from="{ x: -80, duration: 0.8 }"
    v-gsap.mobile.from="{ y: 40, duration: 0.6 }"
  >
    Responsive animation
  </h1>
</template>
```

--------------------------------

### Listen for Split Event

Source: https://github.com/holux-design/v-gsap-nuxt/blob/main/docs/content/2.usage/8.splittext.md

Handle text splitting events using `addEventListener` for the 'vgsap:split' DOM event, allowing external JavaScript to react to split instances.

```javascript
el.addEventListener('vgsap:split', (e) => {
  const { el, split } = e.detail
  // do something
})
```

--------------------------------

### State-Driven Animations with `.onState`

Source: https://context7.com/holux-design/v-gsap-nuxt/llms.txt

Trigger animations when a data attribute changes to a specific value. Ensure the data attribute is reactive and correctly bound.

```vue
<template>
  <!-- Toggle animation when data-open becomes "true" -->
  <div
    :data-open="isOpen"
    v-gsap.onState-open.to="{ height: '200px', duration: 0.3 }"
  >
    Accordion panel
  </div>

  <!-- React to a numeric index -->
  <div
    :data-index="activeIndex"
    v-gsap.onState-index-2.to="{ backgroundColor: '#4ade80', duration: 0.2 }"
  >
    Highlights when index is 2
  </div>

  <!-- Inherit data attribute from a parent element -->
  <div :data-tab="currentTab">
    <div v-gsap.onState-tab-profile.inherit.from="{ opacity: 0, y: 10 }">
      Profile panel
    </div>
  </div>
</template>

<script setup>
const isOpen = ref(false)
const activeIndex = ref(0)
const currentTab = ref('home')
</script>
```

--------------------------------

### Single Playback with .once

Source: https://github.com/holux-design/v-gsap-nuxt/blob/main/docs/content/2.usage/3.modifiers.md

Ensure animations play only once when scrolling down and remain in their final state when scrolling back up.

```typescript
v-gsap.whenVisible.once.to={...}
```

--------------------------------

### Timeline with SplitText Animations

Source: https://github.com/holux-design/v-gsap-nuxt/blob/main/docs/content/2.usage/2.examples.md

Combine multiple SplitText animations within a GSAP timeline, animating titles and subtitles sequentially.

```vue
<div v-gsap.timeline.whenVisible>
  <h1 v-gsap.add.splitText.chars.from="{ opacity: 0, y: -30, stagger: 0.05 }">
    Main Title
  </h1>
  <p v-gsap.add.splitText.words.from="{ opacity: 0, x: -20, stagger: 0.1 }">
    Subtitle that follows
  </p>
</div>
```

--------------------------------

### Parallax Effect (Faster with Custom Speed)

Source: https://github.com/holux-design/v-gsap-nuxt/blob/main/docs/content/2.usage/2.examples.md

Apply a faster parallax effect with a custom speed multiplier using `.parallax.faster-N`.

```html
<div v-gsap.parallax.faster-5>Lorem Ipsum...</div>
```

--------------------------------

### Hover Animations with .whileHover

Source: https://github.com/holux-design/v-gsap-nuxt/blob/main/docs/content/2.usage/3.modifiers.md

Define animations that play when the user hovers over an element. By default, these animations reverse when the hover ends.

```typescript
v-gsap.whileHover.to={...}
```

--------------------------------

### Basic v-if Animation with GSAPTransition

Source: https://github.com/holux-design/v-gsap-nuxt/blob/main/docs/content/2.usage/7.v-if.md

Wrap an element with v-if in GSAPTransition to apply default opacity animations when it appears or disappears. The default duration is 0.5s.

```vue
<GSAPTransition>
  <div v-if="someProp">Hello World</div>
</GSAPTransition>
```

--------------------------------

### Debugging Animations with .markers

Source: https://github.com/holux-design/v-gsap-nuxt/blob/main/docs/content/2.usage/3.modifiers.md

Add visual markers to your animations for easier debugging during development.

```typescript
v-gsap.whenVisible.markers.to={...}
```

--------------------------------

### Import and Register Vue Directive

Source: https://github.com/holux-design/v-gsap-nuxt/blob/main/docs/content/1.installation/4.vue.only.md

Import the `vGsapVue` directive from `v-gsap-nuxt/vue` and register it with your Vue application instance in `main.ts`. Ensure this is done after app initialization and before mounting.

```typescript
import { vGsapVue } from 'v-gsap-nuxt/vue';

// const app = createApp(App);
app.directive('gsap', vGsapVue());
// app.mount('#app');
```

--------------------------------

### Configure v-gsap-nuxt Options

Source: https://github.com/holux-design/v-gsap-nuxt/blob/main/docs/content/1.installation/2.configuration.md

Define custom presets, breakpoints, scrollers, and composable behavior in your nuxt.config.ts file. This allows for advanced customization of GSAP animations within your Nuxt.js project.

```typescript
vgsap: {
	presets: [],
	breakpoint: 768,
	scroller: '',
	composable: true
}
```

--------------------------------

### Viewport Specific Animations

Source: https://github.com/holux-design/v-gsap-nuxt/blob/main/docs/content/2.usage/3.modifiers.md

Control animations based on viewport size using `.mobile` or `.desktop` modifiers. The breakpoint is 768px, and window resizing is handled automatically. Both can be used on the same element.

```html
<!-- Animation only on mobile -->
<div v-gsap.mobile.slide-left>...</div>

<!-- Animation only on desktop -->
<div v-gsap.desktop.slide-right>...</div>

<!-- Animation on both mobile and desktop -->
<div v-gsap.mobile.fade v-gsap.desktop.fade>...</div>
```

--------------------------------

### Staggered Group Transitions

Source: https://github.com/holux-design/v-gsap-nuxt/blob/main/docs/content/2.usage/7.v-if.md

Enable staggered animations for group transitions by setting the 'stagger' prop and adding ':data-index="idx"' to each element. A default stagger of 0.1s is applied.

```vue
<GSAPTransition group :stagger="0.15">
  <li 
    v-if="someProp" 
    v-for="(item, idx) in items"
    :data-index="idx"
  >
    {{ item.name }}
  </li>
</GSAPTransition>
```

--------------------------------

### Nuxt Configuration for v-gsap-nuxt

Source: https://context7.com/holux-design/v-gsap-nuxt/llms.txt

Configure v-gsap-nuxt in nuxt.config.ts. Options include presets, breakpoint, scroller, and composable auto-import.

```typescript
// nuxt.config.ts – manual registration
export default defineNuxtConfig({
  modules: ['v-gsap-nuxt'],
  vgsap: {
    presets: [],       // reusable animation presets
    breakpoint: 768,   // px breakpoint for .mobile / .desktop modifiers
    scroller: '',      // CSS selector for a custom scroll container
    composable: true,  // auto-import useGSAP() composable (default true)
  },
})
```

--------------------------------

### Split Text into Lines

Source: https://github.com/holux-design/v-gsap-nuxt/blob/main/docs/content/2.usage/8.splittext.md

Use the `.lines` split type to animate text line by line. This is ideal for multi-line text where each line should animate independently.

```vue
<div v-gsap.splitText.lines.from="{ opacity: 0, y: 50 }">
  This is a long text that spans
  across multiple lines and each line
  animates separately from the others
</div>
```

--------------------------------

### Complex SplitText Animations

Source: https://github.com/holux-design/v-gsap-nuxt/blob/main/docs/content/2.usage/8.splittext.md

Create complex animations using SplitText by providing an array of from-to animation objects, including stagger and easing.

```vue
<h1 v-gsap.splitText.chars.fromTo="[
  {
    opacity: 0,
    scale: 0.5,
    rotation: -90
  },
  {
    opacity: 1,
    scale: 1,
    rotation: 0,
    stagger: 0.08,
    ease: 'back.out(1.7)'
  }
]">
  Complex animation
</h1>
```

--------------------------------

### Split Text Animation - Lines

Source: https://github.com/holux-design/v-gsap-nuxt/blob/main/docs/content/2.usage/3.modifiers.md

Animate multi-line text line by line using the `.splitText.lines` modifier. Ensure text is structured with line breaks for this to work effectively.

```html
<div v-gsap.splitText.lines.from="{ opacity: 0, y: 50 }">
  Multi-line text
  animates line by line
</div>
```

--------------------------------

### Reversible Animations with .once.reversible

Source: https://github.com/holux-design/v-gsap-nuxt/blob/main/docs/content/2.usage/3.modifiers.md

Allows animations to reverse when scrolling back up, enabling them to play again when scrolling down. This was the default behavior before.

```typescript
v-gsap.whenVisible.once.reversible.to={...}
```

--------------------------------

### SplitText Word Animation with Reveal Mask

Source: https://github.com/holux-design/v-gsap-nuxt/blob/main/docs/content/2.usage/2.examples.md

Animate words with a reveal effect using a mask as they enter the viewport, with a stagger delay.

```vue
<p v-gsap.splitText.mask.words.whenVisible.from="{ y: '100%', stagger: 0.1 }">
  Words appearing with reveal effect
</p>
```

--------------------------------

### Fast Stagger Animation

Source: https://github.com/holux-design/v-gsap-nuxt/blob/main/docs/content/2.usage/8.splittext.md

Achieve a rapid sequential animation by setting a small `stagger` value for character animations.

```vue
<div v-gsap.splitText.chars.from="{ opacity: 0, y: 20, stagger: 0.05 }">
  Fast animation
</div>
```

--------------------------------

### Custom Ordering of Timeline Steps

Source: https://github.com/holux-design/v-gsap-nuxt/blob/main/docs/content/2.usage/5.timeline.md

Use the .order-N modifier to define a custom sequence for animation steps within a timeline, overriding the default HTML order.

```html
<section v-gsap.timeline>
	<h1 v-gsap.add.order-0.from="{ x: -32 }">Hello World</h1> <!-- Order: 0 -->
	<div>
		<span v-gsap.add.order-3.from="{ scale: 0 }">They see me animating</span> <!-- Order: 3 -->
		<span v-gsap.add.order-2.from="{ scale: 0 }">They see me animating</span> <!-- Order: 2 -->
	</div>
	<h2 v-gsap.add.order-1.from="{ x: -32 }">Still here</h2> <!-- Order: 1 -->
</section>
```

--------------------------------

### SplitText Integration in Timelines

Source: https://github.com/holux-design/v-gsap-nuxt/blob/main/docs/content/2.usage/8.splittext.md

Incorporate SplitText animations within GSAP timelines using the .timeline and .add directives. Different split types can be used per element within the same timeline.

```vue
<div v-gsap.timeline.whenVisible class="container">
  <h1 v-gsap.add.splitText.chars.from="{ opacity: 0, y: -20, stagger: 0.05 }">
    Main title
  </h1>
  <p v-gsap.add.splitText.words.from="{ opacity: 0, x: -30, stagger: 0.1 }">
    Subtitle that follows
  </p>
</div>
```

--------------------------------

### Using Reusable Animation Presets in Vue Components

Source: https://context7.com/holux-design/v-gsap-nuxt/llms.txt

Reference custom animation presets defined in `nuxt.config.ts` by their name using the `v-gsap.preset` directive. This simplifies applying common animation patterns.

```vue
<template>
  <!-- Use preset by name -->
  <ul v-gsap.preset="'stagger-right'">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>

  <div v-gsap.preset="'pop-in'">Pop in card</div>
</template>
```

--------------------------------

### Adding Multiple Animation Steps to a Timeline

Source: https://github.com/holux-design/v-gsap-nuxt/blob/main/docs/content/2.usage/5.timeline.md

Add individual animation steps to a timeline using the .add modifier on child elements. Steps are ordered by their appearance in the HTML by default.

```html
<section v-gsap.timeline>
	<h1 v-gsap.add.from="{ x: -32 }">Hello World</h1>
	<h2 v-gsap.add.from="{ x: -32 }">Still here</h2>
</section>
```

--------------------------------

### Timeline Callback for Update Events

Source: https://github.com/holux-design/v-gsap-nuxt/blob/main/docs/content/2.usage/5.timeline.md

Attach callbacks like .onUpdate to a timeline to execute custom logic during the animation's progress. The callback receives a timeline snapshot.

```vue
<section v-gsap.timeline.onUpdate="(self) => { console.log(self) }">
	...
</section>
```

--------------------------------

### Character Masks for Reveal

Source: https://github.com/holux-design/v-gsap-nuxt/blob/main/docs/content/2.usage/8.splittext.md

Use the `.mask.chars` modifier to create a reveal effect where each character is masked and animates into view.

```vue
<h1 v-gsap.splitText.mask.chars.from="{ opacity: 0, y: 100 }">
  Text with character masks
</h1>
```

--------------------------------

### Split Text into Words

Source: https://github.com/holux-design/v-gsap-nuxt/blob/main/docs/content/2.usage/8.splittext.md

Use the `.words` split type to animate text word by word. This is useful for sentence-level reveals.

```vue
<p v-gsap.splitText.words.whenVisible.from="{ opacity: 0, x: -30 }">
  This sentence animates word by word
</p>
```

--------------------------------

### Configure v-gsap-nuxt Directive in Vue

Source: https://github.com/holux-design/v-gsap-nuxt/blob/main/docs/content/1.installation/4.vue.only.md

Configure the `vGsapVue` directive with custom settings directly during initialization in `main.ts`. This allows for global configuration of presets, breakpoints, scrollers, and composable behavior within your Vue app.

```typescript
app.directive('gsap', vGsapVue({
		presets: [],
		breakpoint: 768,
		scroller: '',
		composable: true
	}));
```

--------------------------------

### Line Masks with Stagger

Source: https://github.com/holux-design/v-gsap-nuxt/blob/main/docs/content/2.usage/8.splittext.md

Combine line masking with a stagger effect to reveal each line sequentially from below.

```vue
<div v-gsap.splitText.mask.lines.from="{ y: '100%', stagger: 0.1 }">
  Each line appears from below
  with a very elegant
  mask effect
</div>
```

--------------------------------

### Animating Elements with `<GSAPTransition>` Component

Source: https://context7.com/holux-design/v-gsap-nuxt/llms.txt

Wrap elements controlled by `v-if` or `v-show` to animate their enter and exit transitions using GSAP. Supports various props for customization like `hidden`, `duration`, `ease`, and `appear`.

```vue
<template>
  <!-- Default: fade in/out -->
  <GSAPTransition>
    <div v-if="visible">Hello World</div>
  </GSAPTransition>

  <!-- Custom hidden state (merges with default opacity behavior) -->
  <GSAPTransition :hidden="{ x: -32 }" :duration="0.6" ease="power2.out">
    <div v-if="visible">Slides in from left</div>
  </GSAPTransition>

  <!-- Play enter animation on initial mount -->
  <GSAPTransition :hidden="{ y: -40, opacity: 0 }" :appear="true" :duration="0.8">
    <div v-if="true">Animates on load</div>
  </GSAPTransition>

  <!-- Disable default opacity (translate only) -->
  <GSAPTransition :hidden="{ opacity: 1, x: -32 }">
    <div v-if="visible">No opacity change</div>
  </GSAPTransition>

  <!-- Multiple elements with TransitionGroup + stagger -->
  <GSAPTransition group :stagger="0.15" :duration="0.4" :hidden="{ y: 20, opacity: 0 }">
    <li
      v-for="(item, idx) in items"
      :key="item.id"
      :data-index="idx"
      v-if="visible"
    >
      {{ item.name }}
    </li>
  </GSAPTransition>

  <!-- Full example with all props -->
  <GSAPTransition
    :hidden="{ x: -32 }"
    :duration="1"
    :delay="0.75"
    :appear="true"
    ease="bounce.out"
  >
    <div v-if="visible">Bounces in with delay</div>
  </GSAPTransition>
</template>

<script setup>
const visible = ref(false)
const items = ref([{ id: 1, name: 'Alpha' }, { id: 2, name: 'Beta' }])
</script>
```

--------------------------------

### Animate Text using Value

Source: https://github.com/holux-design/v-gsap-nuxt/blob/main/docs/content/2.usage/2.examples.md

Provide the text content directly as a string value to the `.animateText` modifier.

```html
<div v-gsap.whenVisible.animateText="'Lorem Ipsum...'" ></div>
```

--------------------------------

### Callback on Split

Source: https://github.com/holux-design/v-gsap-nuxt/blob/main/docs/content/2.usage/8.splittext.md

Execute a function after text is split using the `splitText.onSplit` callback. Access the SplitText instance and the element for custom logic.

```vue
<h2 v-gsap.splitText.words.from="{
  opacity: 0,
  y: 24,
  splitText: {
    onSplit: ({ el, split }) => {
      // Access split.words / split.chars / split.lines
      console.log('Split ready', el, split)
    }
  }
}">
  Inspect words after split
</h2>
```

--------------------------------

### Split Text Animation - Characters

Source: https://github.com/holux-design/v-gsap-nuxt/blob/main/docs/content/2.usage/3.modifiers.md

Animate text character by character using the `.splitText.chars` modifier. This requires GSAP SplitText functionality.

```html
<h1 v-gsap.splitText.chars.from="{ opacity: 0, y: 20 }">Hello World</h1>
```

--------------------------------

### Infinite Animations with .infinitely

Source: https://github.com/holux-design/v-gsap-nuxt/blob/main/docs/content/2.usage/3.modifiers.md

Set the animation timeline to repeat indefinitely by using the .infinitely modifier.

```typescript
v-gsap.infinitely.to={...}
```

--------------------------------

### Word Masks with Visibility Trigger

Source: https://github.com/holux-design/v-gsap-nuxt/blob/main/docs/content/2.usage/8.splittext.md

Apply a mask to words and trigger the animation only when the element becomes visible in the viewport.

```vue
<p v-gsap.splitText.mask.words.whenVisible.from="{ y: '100%' }">
  Reveal effect for words
</p>
```

--------------------------------

### Typewriter Effect

Source: https://github.com/holux-design/v-gsap-nuxt/blob/main/docs/content/2.usage/8.splittext.md

Simulate a typewriter effect by animating characters with a small stagger, making them appear one after another.

```vue
<p v-gsap.splitText.chars.from="{ opacity: 0, stagger: 0.05 }">
  This text appears as if being typed
</p>
```

--------------------------------

### Split Text into Characters

Source: https://github.com/holux-design/v-gsap-nuxt/blob/main/docs/content/2.usage/8.splittext.md

Use the `.chars` split type to animate text letter by letter. This is the default behavior if no split type is specified.

```vue
<h1 v-gsap.splitText.chars.from="{ opacity: 0, y: 20 }">
  Character by character animation
</h1>
```

--------------------------------

### Split Text with Custom Options

Source: https://github.com/holux-design/v-gsap-nuxt/blob/main/docs/content/2.usage/3.modifiers.md

Pass custom options to SplitText, such as `waitForFonts` or `onSplit`, directly within the directive value. This allows fine-grained control over font loading and callbacks.

```html
<h1 v-gsap.splitText.chars.from="{ opacity: 0, y: 20, splitText: { waitForFonts: true, onSplit: ({ split }) => console.log(split.chars.length) } }">
  Hello World
</h1>
```

--------------------------------

### Slow Stagger Animation

Source: https://github.com/holux-design/v-gsap-nuxt/blob/main/docs/content/2.usage/8.splittext.md

Create a deliberate, slow sequential animation by setting a larger `stagger` value for character animations.

```vue
<div v-gsap.splitText.chars.from="{ opacity: 0, y: 20, stagger: 0.3 }">
  Slow animation
</div>
```

--------------------------------

### Group Transitions with v-for and v-if

Source: https://github.com/holux-design/v-gsap-nuxt/blob/main/docs/content/2.usage/7.v-if.md

Use the 'group' flag on GSAPTransition to animate multiple elements, typically used with v-for and v-if. This leverages Vue's TransitionGroup component.

```vue
<GSAPTransition group>
  <li 
    v-if="someProp" 
    v-for="item in items"
  >
    {{ item.name }}
  </li>
</GSAPTransition>
```