V Gsap Nuxt

https://v-gsap-nuxt.vercel.app/
Admin
A Nuxt module that simplifies writing GSAP animations inline, allowing developers to integrate them...
Tokens:19,772
Snippets:83
Trust Score:7.8
Update:1 year ago
Show doc for...
Tokens:
Raw
### Install v-gsap-nuxt Package

Source: https://v-gsap-nuxt.vercel.app/installation/vue

Instructions for installing the v-gsap-nuxt package using npm. This is the initial step for integrating the module into your project.

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

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

### Manual Install v-gsap-nuxt Module (npm)

Source: https://v-gsap-nuxt.vercel.app/installation/getting-started

Installs the v-gsap-nuxt module using npm. This involves adding the package to your project's dependencies.

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

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

### v-gsap Animate Text (Vue)

Source: https://v-gsap-nuxt.vercel.app/usage/examples

Demonstrates animating text content character by character using the v-gsap directive with the 'animateText' modifier. Examples show using textContent, providing text as a prop, and configuring animation properties like 'start'.

```vue
<div v-gsap.whenVisible.animateText>Lorem Ipsum...</div>
```

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

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

```vue
<div v-gsap.whenVisible.animateText.slow>Lorem Ipsum...</div>
```

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

### Example Preset Definition

Source: https://v-gsap-nuxt.vercel.app/usage/presets

Provides a concrete example of a preset named 'stagger-right', configured with specific GSAP modifiers and animation values for reuse.

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

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

### Auto Install v-gsap-nuxt Module

Source: https://v-gsap-nuxt.vercel.app/installation/getting-started

Installs the v-gsap-nuxt module using npx, a package runner tool. This is a quick way to add the module to your Nuxt project.

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

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

### GSAP Desktop Animation

Source: https://v-gsap-nuxt.vercel.app/usage/examples

Applies a GSAP rotation animation to an element specifically for desktop viewports. This example uses the `v-gsap.desktop.infinitely.to` directive to rotate the element infinitely.

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

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

### Full GSAP Transition Example

Source: https://v-gsap-nuxt.vercel.app/usage/v-if

A comprehensive example demonstrating the use of multiple properties on the `<GSAPTransition>` component, including custom `hidden` state, `duration`, `delay`, `appear` for initial load animations, `ease`, and `stagger` for group transitions.

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

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

### GSAP Desktop and Mobile Differing Animations

Source: https://v-gsap-nuxt.vercel.app/usage/examples

Shows how to apply different GSAP animations for desktop and mobile viewports to the same element. Desktop gets a 90deg rotation, while mobile gets -90deg. This utilizes `v-gsap.desktop` and `v-gsap.mobile` directives.

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

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

### v-gsap Hover Animation (Vue)

Source: https://v-gsap-nuxt.vercel.app/usage/examples

Illustrates how to apply animations that trigger on hover using the v-gsap directive with the 'whileHover' modifier. This example shows a basic scale-up effect when the element is hovered.

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

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

### Use GSAP Composable in Script Setup

Source: https://v-gsap-nuxt.vercel.app/usage/composable

Demonstrates how to use the `useGSAP()` composable within the `<script setup>` block of a Vue component to imperatively control GSAP animations. This is useful in cases where the directive might not be applicable.

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

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

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

### Scroll-Triggered Animations with v-gsap.whenVisible.to

Source: https://v-gsap-nuxt.vercel.app/playground

Configures scroll-triggered animations that animate elements to a target state (`to`) based on scroll position. Supports custom scroll triggers (`start`, `end`) and scrubbing.

```Vue.js
<section>
  <div v-gsap.whenVisible.to="{ x: -300, start: 'top bottom', end: 'bottom top', scrub: 1.5 }">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
  <div v-gsap.whenVisible.to="{ x: 300, start: 'top bottom', end: 'bottom top', scrub: 1.5 }">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
</section>
```

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

### v-gsap Parallax Effect (Vue)

Source: https://v-gsap-nuxt.vercel.app/usage/examples

Provides examples of implementing parallax scrolling effects with the v-gsap directive using the 'parallax' modifier. Shows basic parallax and custom speed adjustments like 'faster-5'.

```vue
<div v-gsap.parallax.slower>Lorem Ipsum...</div>
```

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

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

### v-gsap Entrance Animations (Vue)

Source: https://v-gsap-nuxt.vercel.app/usage/examples

Demonstrates various entrance animation configurations using the v-gsap directive with the 'whenVisible' and 'entrance' modifiers. Includes basic fade-in, custom start/end points, single-time execution, preset slide animations, and debugging with markers.

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

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

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

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

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

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

### Install v-gsap-nuxt Module

Source: https://v-gsap-nuxt.vercel.app/index

Command to add the v-gsap-nuxt module to your Nuxt.js project using npx. This command integrates the module's functionality into your Nuxt application.

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

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

### GSAP Draggable (Whole Body)

Source: https://v-gsap-nuxt.vercel.app/usage/examples

Makes an element draggable across the entire `body` of the document. This example uses the `v-gsap.draggable.bounds="'body'"` directive to set the bounds.

```vue
<div v-gsap.draggable.bounds="'body'"></div>
```

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

### Timeline with Pinned Section and Complex Tweens

Source: https://v-gsap-nuxt.vercel.app/playground

Creates a pinned timeline section that animates elements sequentially. Uses `v-gsap.timeline.pinned` for the container and `v-gsap.add.to` or `v-gsap.add.fromTo` for complex multi-property animations.

```Vue.js
<section v-gsap.timeline.pinned>
  <div class="Dot" v-gsap.add.to="{ width: '800px' }"></div>
  <h1
    v-gsap.add.fromTo="[{ opacity: 0, y: 32 }, { opacity: 1, y: 0 }]"
    v-gsap.add.to="{ opacity: 0, y: -32 }">New era of</h1>
  <h1
    v-gsap.add.withPrevious.fromTo="[{ opacity: 0, y: 32 }, { opacity: 1, y: 0 }]"
    v-gsap.add.to="{ opacity: 0, y: -32 }">animation</h1>
</section>
```

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

### v-gsap delay Modifier

Source: https://v-gsap-nuxt.vercel.app/playground

The `delay-` modifier allows specifying a delay in milliseconds before an animation starts. This can be applied to various triggers like `whileHover` or `whenVisible`.

```vue
v-gsap.whileHover.delay-500.to='{ rotate: '-15deg', y: -12 }'

```

```vue
v-gsap.whileHover.delay-789.to='{ rotate: '-15deg', y: -12 }'

```

```vue
v-gsap.whenVisible.once.delay-1000.to='{ x: 100 }'

```

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

### Scroll-Triggered Animations with v-gsap.whenVisible

Source: https://v-gsap-nuxt.vercel.app/playground

Animates elements when they become visible in the viewport using `v-gsap.whenVisible`. Allows defining initial states (`from`) and applying delays and staggering for sequences.

```Vue.js
<article v-gsap.whenVisible.from="{ scale: 0.8, height: 0, padding: 0 }">
	<div v-gsap.whenVisible.from="{ y: 100 }"></div>
	<div v-gsap.whenVisible.delay-1000.stagger.from="{ opacity: 0, x: -40 }">
		<div class="h-[20px] w-[200px]"></div>
		<div class="h-[14px] w-[140px]"></div>
		<div class="h-[14px] w-[120px]"></div>
	</div>
</article>
```

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

### v-gsap Inline Animation Syntax Example

Source: https://v-gsap-nuxt.vercel.app/installation/philosophy

Demonstrates the core inline syntax of v-gsap for applying GSAP animations directly in Vue templates. This syntax maps common GSAP features like ScrollTrigger (`whenVisible`), stagger effects, and animation origins (`from`) into a concise, readable format, enhancing developer experience.

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

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

### GSAP Timeline Animations with v-gsap.timeline

Source: https://v-gsap-nuxt.vercel.app/playground

Orchestrates multiple animations within a timeline that triggers based on scroll position. Uses `v-gsap.timeline` for the container and `v-gsap.add` or `v-gsap.add.to` for individual tween sequences.

```Vue.js
<section v-gsap.timeline.whenVisible="{ start: 'top bottom', end: 'bottom top', scrub: 1.5 }">
  <div v-gsap.add.to="{ x: -300 }">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
  <div v-gsap.add.withPrevious.to="{ x: 300 }">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
</section>
```

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

### v-gsap preset Modifier

Source: https://v-gsap-nuxt.vercel.app/playground

The `preset` modifier allows applying predefined animation configurations defined in the `nuxt.config.js` file. This simplifies applying common animation styles.

```vue
v-gsap.preset='rotate'

```

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

### Basic Parallax Animation with v-gsap

Source: https://v-gsap-nuxt.vercel.app/playground

Applies parallax scrolling effects to elements using the `v-gsap.parallax` directive. Supports predefined speeds like `faster` and `faster-10`.

```Vue.js
<section>
	<div v-gsap.parallax.faster></div>
	<div v-gsap.parallax.faster-10></div>
</section>
```

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

### v-gsap Magnetic Effect (Vue)

Source: https://v-gsap-nuxt.vercel.app/usage/examples

Shows how to apply a magnetic effect to elements using the v-gsap directive with the 'magnetic' modifier. Supports basic magnetic behavior and an enhanced 'strong' version for more pronounced interaction.

```vue
<button v-gsap.magnetic></button>
```

```vue
<button v-gsap.magnetic.strong></button>
```

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

### GSAP Draggable (Rotation)

Source: https://v-gsap-nuxt.vercel.app/usage/examples

Applies draggable functionality that allows rotation of the element. This is enabled with the `v-gsap.draggable.rotation` directive.

```vue
<div v-gsap.draggable.rotation></div>
```

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

### v-gsap Device Modifiers

Source: https://v-gsap-nuxt.vercel.app/playground

The `.desktop` and `.mobile` modifiers allow conditional animations based on the device type. They can be combined with other modifiers like `infinitely`.

```vue
v-gsap.desktop.infinitely.to

```

```vue
v-gsap.mobile.infinitely.to

```

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

### GSAP Hover Effect (No Reverse)

Source: https://v-gsap-nuxt.vercel.app/usage/examples

Demonstrates a GSAP animation that scales an element on hover without reversing the animation when the hover ends. This uses the `v-gsap.whileHover.noReverse.to` directive.

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

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

### v-gsap whenVisible Modifier

Source: https://v-gsap-nuxt.vercel.app/playground

The `whenVisible` modifier triggers animations when an element enters the viewport. It supports custom start/end points and can be configured to run once.

```vue
v-gsap.whenVisible.from='{ autoAlpha: 0 }'

```

```vue
v-gsap.whenVisible.from='{ autoAlpha: 0, rotate: '-45deg' }'

```

```vue
v-gsap.whenVisible.from='{ autoAlpha: 0, rotate: '-45deg' }'

```

```vue
v-gsap.whenVisible.from='{ autoAlpha: 0, x: -50 }'

```

```vue
v-gsap.whenVisible.once.from='{ autoAlpha: 0, rotate: -45, duration: 2 }'

```

```vue
v-gsap.whenVisible.once.reversible.from='{ autoAlpha: 0, rotate: -45, duration: 2 }'

```

```vue
v-gsap.whenVisible.from='{ autoAlpha: 0, start: 'top 60%', end: 'bottom 40%' }'

```

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

### v-gsap infinitely Modifier

Source: https://v-gsap-nuxt.vercel.app/playground

The `infinitely` modifier enables an animation to loop indefinitely. It can be combined with other triggers like `whileHover`.

```vue
v-gsap.whileHover.to='{ rotate: '-15deg', y: -12 }'

```

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

### Element Visibility Toggle with v-gsap.onState-visible

Source: https://v-gsap-nuxt.vercel.app/playground

Animates an element based on its visibility state, often controlled by a data attribute like `data-visible`. Uses `v-gsap.onState-visible.from` to define the initial animation state.

```Vue.js
<div
  :data-visible="isVisible"
  v-gsap.onState-visible.from="{ scale: 0, rotate: -25 }"></div>
```

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

### v-gsap-nuxt Presets

Source: https://v-gsap-nuxt.vercel.app/usage/modifiers

Define reusable animation configurations in `nuxt.config.ts` to simplify and standardize animations across your Nuxt.js project. Presets allow for abstracting complex GSAP setups into easily callable modifiers.

```typescript
// nuxt.config.ts
export default defineNuxtConfig({
  gsap: {
    presets: {
      myCustomPreset: {
        // GSAP animation properties for the preset
        duration: 1,
        ease: 'power2.out'
      }
    }
  }
});

// Usage in a component:
// <div v-gsap.myCustomPreset="{ y: 100 }" />
```

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

### Magnetic Effect Modifier Variations

Source: https://v-gsap-nuxt.vercel.app/playground

Showcases different strength levels for the magnetic effect, controlled by modifiers like `weak`, `weaker`, `strong`, and `stronger`.

```Vue.js
v-gsap.magnetic
```

```Vue.js
v-gsap.magnetic.weak
```

```Vue.js
v-gsap.magnetic.weaker
```

```Vue.js
v-gsap.magnetic.stronger
```

```Vue.js
v-gsap.magnetic.strong
```

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

### v-gsap stagger Modifier

Source: https://v-gsap-nuxt.vercel.app/playground

The `stagger` modifier applies animations to a collection of elements with a delay between each. The delay amount can be specified.

```vue
v-gsap.whenVisible.stagger.from='{ opacity: 0, y: 50, stagger: 0.4 }'

```

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

### State-Based Animations with v-gsap.onState-index

Source: https://v-gsap-nuxt.vercel.app/playground

Triggers animations based on specific states or indices, such as `onState-index-0`. The `inherit` modifier allows animations to build upon previous states, and `from` defines the initial animation.

```Vue.js
<section :data-index="currentIndex">
  <div v-gsap.onState-index-0.inherit.from="{ scale: 0 }"></div>
  <div v-gsap.onState-index-1.inherit.from="{ scale: 0 }"></div>
  <div v-gsap.onState-index-2.inherit.from="{ scale: 0 }"></div>
</section>
```

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

### v-gsap animateText Modifier

Source: https://v-gsap-nuxt.vercel.app/playground

The `animateText` modifier animates text character by character. It supports speed variations like `.slow` and `.fast`, and can be combined with `.once`.

```vue
v-gsap.whenVisible.animateText

```

```vue
v-gsap.whenVisible.animateText.slow

```

```vue
v-gsap.whenVisible.animateText.fast

```

```vue
v-gsap.whenVisible.once.animateText

```

```vue
v-gsap.whenVisible.animateText.once.slow

```

```vue
v-gsap.whenVisible.animateText.once.fast

```

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

### Parallax Modifier Variations

Source: https://v-gsap-nuxt.vercel.app/playground

Demonstrates various speed modifiers for the parallax effect, including `slower`, `faster`, and incremental adjustments like `slower-10`, `faster-20`.

```Vue.js
v-gsap.parallax.slower
```

```Vue.js
v-gsap.parallax.faster
```

```Vue.js
v-gsap.parallax.slower-10
```

```Vue.js
v-gsap.parallax.slower-20
```

```Vue.js
v-gsap.parallax.faster-10
```

```Vue.js
v-gsap.parallax.faster-20
```

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

### GSAP Draggable (Within Parent)

Source: https://v-gsap-nuxt.vercel.app/usage/examples

Enables basic draggable functionality for an element, constrained within its parent container. This is achieved using the `v-gsap.draggable` directive.

```vue
<div v-gsap.draggable></div>
```

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

### v-gsap Stagger Animation (Vue)

Source: https://v-gsap-nuxt.vercel.app/usage/examples

Illustrates how to use the v-gsap directive with the 'stagger' modifier to animate a list of elements sequentially. This is often used for animating child elements within a container when they become visible.

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

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

### Conditional Animations with GSAPTransition and v-if

Source: https://v-gsap-nuxt.vercel.app/playground

Applies GSAP animations to elements conditionally rendered using `v-if`. The `GSAPTransition` component can wrap elements and accept animation properties like `hidden`.

```Vue.js
<GSAPTransition :hidden="{ scale: 0, rotate: -25 }">
  <div v-if="index == 0"></div>
</GSAPTransition>
```

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

### Pinned GSAP Timeline with Scroll Control

Source: https://v-gsap-nuxt.vercel.app/usage/timeline

Illustrates how to create a pinned GSAP timeline that remains fixed in place during scroll, allowing animations to play out over a defined scroll range. The `start` and `end` properties control the pinning behavior.

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

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

### Use the Preset

Source: https://v-gsap-nuxt.vercel.app/usage/presets

Shows how to apply a previously defined preset, such as 'stagger-right', to an HTML element using the `v-gsap` directive with the `.preset` modifier.

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

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

### Registering Custom GSAP Plugins

Source: https://v-gsap-nuxt.vercel.app/information/gsap-plugins

Demonstrates how to register custom GSAP plugins, such as EasePack, within a Nuxt application using the `useGSAP` composable. Plugins are registered once, preferably at a high level in the app structure, to share the GSAP instance.

```vue
<script setup>
import { RoughEase } from 'gsap/EasePack'
onBeforeMount(() => {
  useGSAP().registerPlugin(RoughEase)
})
</script>
```

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

### GSAP Timeline with Parallel Animation Steps

Source: https://v-gsap-nuxt.vercel.app/usage/timeline

Demonstrates how to make an animation step play concurrently with the preceding one in a GSAP timeline. This is achieved using the `.withPrevious` modifier on the `.add` directive.

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

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

### GSAP Draggable (Horizontal Only)

Source: https://v-gsap-nuxt.vercel.app/usage/examples

Restricts draggable movement to the horizontal axis (X-axis) only. This is configured using the `v-gsap.draggable.x` directive.

```vue
<div v-gsap.draggable.x></div>
```

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

### v-gsap whileHover Modifier

Source: https://v-gsap-nuxt.vercel.app/playground

The `whileHover` modifier applies animations when the element is being hovered over. It can be configured with `.noReverse` to prevent the animation from reversing on mouse out.

```vue
v-gsap.whileHover.to='{ rotate: '-15deg', y: -12 }'

```

```vue
v-gsap.whileHover.noReverse.to='{ rotate: '-15deg', y: -12 }'

```

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

### Configure v-gsap-nuxt Vue Directive

Source: https://v-gsap-nuxt.vercel.app/installation/vue

Shows how to pass configuration options to the vGsapVue directive during initialization in a Vue application. This allows customization of presets, breakpoints, and scroller settings.

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

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

### Configure v-gsap-nuxt in nuxt.config.ts

Source: https://v-gsap-nuxt.vercel.app/installation/getting-started

Adds the v-gsap-nuxt module to your Nuxt project's configuration file. This enables the module's features within your application.

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

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

### GSAPTransition Component Properties

Source: https://v-gsap-nuxt.vercel.app/usage/v-if

Defines the available properties for the `<GSAPTransition>` component, detailing their types, default values, and purpose for customizing animations on conditional rendering.

```APIDOC
GSAPTransition Component Properties:

Properties:
  hidden | Type: GSAPTweenVars | Description: State of the toggled element when hidden. Allows custom GSAP tween properties.
  duration | Type: number, Default: 0.5 | Description: The duration of the animation in seconds.
  appear | Type: boolean, Default: false | Description: Whether or not to run the enter-animation on initial load.
  ease | Type: string, Default: 'power1.inOut' | Description: The ease of the animation. Can be overridden by the 'ease' modifier in 'hidden'.
  delay | Type: number, Default: 0 | Description: Initial delay of the transition animation in seconds.
  group | Type: boolean, Default: false | Description: Whether or not the transition applies to multiple elements. Typically paired with v-if or v-for.
  stagger | Type: number, Default: 0.1 | Description: Delay the appearance of each next element when using 'group'. Requires ':data-index="idx"' on the transitioning elements.
```

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

### Basic GSAP Transition with v-if

Source: https://v-gsap-nuxt.vercel.app/usage/v-if

Demonstrates using the `<GSAPTransition>` component to animate an element that is conditionally rendered using `v-if`. By default, it animates opacity with a duration of 0.5s.

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

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

### Basic GSAP Timeline with Sequential Adds

Source: https://v-gsap-nuxt.vercel.app/usage/timeline

Demonstrates the fundamental usage of the `.timeline` modifier on a parent element to group animations. Child elements use the `.add` modifier to be included sequentially in the timeline.

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

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

### v-gsap draggable Modifier

Source: https://v-gsap-nuxt.vercel.app/playground

The `draggable` modifier makes an element draggable. It supports axis constraints (`.x`, `.y`), rotation, and bounding box limitations using selectors.

```vue
v-gsap.draggable

```

```vue
v-gsap.draggable.x

```

```vue
v-gsap.draggable.y

```

```vue
v-gsap.draggable.rotation

```

```vue
v-gsap.draggable.bounds='#draggable'

```

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

### GSAP Draggable (Vertical Only within Body)

Source: https://v-gsap-nuxt.vercel.app/usage/examples

Enables draggable functionality constrained to the vertical axis (Y-axis) and limited to the `body` boundaries. This uses `v-gsap.draggable.y.bounds="'body'"`.

```vue
<div v-gsap.draggable.y.bounds="'body'"></div>
```

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

### Nuxt Configuration for v-gsap-nuxt

Source: https://v-gsap-nuxt.vercel.app/installation/configuration

This snippet shows the configuration object for the v-gsap-nuxt module within a Nuxt.js project's `nuxt.config.ts` file. It outlines available options such as defining presets, setting custom breakpoints, specifying a scroller element, and enabling/disabling GSAP as a composable.

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

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

### Multiple Animation Steps per Element

Source: https://v-gsap-nuxt.vercel.app/usage/timeline

Demonstrates how to apply multiple GSAP animation steps to a single HTML element within a Vue template using the v-gsap directive. It highlights the ability to chain animations like 'from' and 'to' on the same element, with a note on modifier limitations.

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

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

### Add Preset Option in Config

Source: https://v-gsap-nuxt.vercel.app/usage/presets

Demonstrates how to add the `presets` array to the `vgsap` configuration object in your `nuxt.config.ts` file to enable custom animation presets.

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

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

### Preset Type Definition

Source: https://v-gsap-nuxt.vercel.app/usage/presets

Defines the expected structure for a preset object, specifying the `name` for identification, `modifiers` for directive attributes, and `value` for animation parameters.

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

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

### v-gsap Animation Types

Source: https://v-gsap-nuxt.vercel.app/usage/modifiers

Explains the core animation types supported by the v-gsap directive: .from (animates from a given state), .to (animates to a given state), .fromTo (combines both), and .call (executes a function).

```APIDOC
v-gsap Animation Types:

.from
  - Animates from a given state to its current state.

.to
  - Animates from the current state to a given to-state.

.fromTo
  - Combines .from and .to. Takes an Array of two states as value.

.call
  - Takes an arrow function as value and executes it.
  - When used with .whenVisible., it will automatically be handled like .once.
```

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

### Import and Use Vue Directive

Source: https://v-gsap-nuxt.vercel.app/installation/vue

Demonstrates how to import the Vue directive from the v-gsap-nuxt package and register it within your Vue application's main file. This enables the use of the 'gsap' directive in your templates.

```typescript
import { vGsapVue } from 'v-gsap-nuxt/vue';
// const app = createApp(App);
app.directive('gsap', vGsapVue());
// app.mount('#app');
```

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

### v-gsap-nuxt Entrance Animations

Source: https://v-gsap-nuxt.vercel.app/usage/modifiers

Apply predefined entrance animations to elements, often used with scroll-triggered effects. These modifiers handle common entry animations like sliding and fading.

```javascript
// Available entrance modifiers:
// .slide-left, .slide-right, .slide-top, .slide-bottom
// .fade, .scale, .scale-full

// Example usage:
// <div v-gsap.entrance.slide-left="{ opacity: 0, x: -50 }" />
// <div v-gsap.entrance.fade="{ opacity: 0 }" />

// Note: .entrance uses .whenVisible.once internally.
```

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

### v-gsap Visibility and Scroll Modifiers

Source: https://v-gsap-nuxt.vercel.app/usage/modifiers

Details modifiers related to visibility and scroll-based animations. .whenVisible enables scrollTrigger with default settings, .fromInvisible adds opacity for entrance animations, and .once/.once.reversible control single playback and reversal.

```APIDOC
v-gsap Visibility and Scroll Modifiers:

.whenVisible
  - Enables scrollTrigger. Defaults to 'top 90% to top 50%' and 'scrub'.
  - Overwrite properties in the value Object. In combination with .fromTo, put overrides in the second state.
  - Example: `v-gsap.whenVisible.to='{ y: 100 }'`

.fromInvisible
  - Adds `opacity: 0` as initial state and includes `opacity: 1` in `.to` or `.fromTo`.
  - Prevents the element from being visible until the directive takes action, useful for entrance animations.
  - Example: `v-gsap.fromInvisible.to='{ opacity: 1, y: 50 }'`

.once
  - Makes the animation play only once when scrolling down, and stay in its final state when scrolling back up.
  - Example: `v-gsap.once.to='{ opacity: 1 }'`

.once.reversible
  - Similar to `.once` but reverses the animation when scrolling back up, allowing it to play again when scrolling down.
  - This is the default previous behavior of `.once`.
  - Example: `v-gsap.once.reversible.to='{ x: 100 }'`

.markers
  - Adds markers for debugging scroll triggers.
  - Example: `v-gsap.whenVisible.markers.to='{ opacity: 1 }'`
```

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

### Group Transition for Multiple Elements

Source: https://v-gsap-nuxt.vercel.app/usage/v-if

Utilizes the `group` flag on `<GSAPTransition>` to enable transitions for multiple elements, typically used with `v-for`. This allows animating lists of items as they enter or leave the DOM.

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

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

### Staggered Group Transitions

Source: https://v-gsap-nuxt.vercel.app/usage/v-if

Enables staggered animations for multiple elements within a group transition by setting the `stagger` prop on `<GSAPTransition>` and providing the element's index via `:data-index`. 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>
```

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

### GSAP Timeline with Custom Animation Ordering

Source: https://v-gsap-nuxt.vercel.app/usage/timeline

Explains how to define a custom playback order for animation steps within a GSAP timeline. The `.order-N` modifier is applied to child elements to specify their sequence.

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

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

### GSAP Timeline Callbacks

Source: https://v-gsap-nuxt.vercel.app/usage/timeline

Illustrates the usage of GSAP timeline callbacks within the v-gsap directive in Vue.js. It shows how to attach event handlers like onUpdate to a timeline, allowing for custom logic execution based on animation progress or direction.

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