https://github.com/hypernym-studio/nuxt-gsap

GSAP module for Nuxt.
https://github.com/hypernym-studio/nuxt-gsap

greensock gsap gsap-module javascript-animations nuxt nuxt-animations nuxt-greensock nuxt-gsap nuxt-gsap-module nuxt-module page-transitions

Last synced: 1 day ago
JSON representation

GSAP module for Nuxt.

• Host: GitHub
• URL: https://github.com/hypernym-studio/nuxt-gsap
• Owner: hypernym-studio
• License: mit
• Created: 2020-11-04T02:22:45.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2024-08-27T10:56:28.000Z (3 months ago)
• Last Synced: 2024-11-07T09:05:43.945Z (8 days ago)
• Topics: greensock, gsap, gsap-module, javascript-animations, nuxt, nuxt-animations, nuxt-greensock, nuxt-gsap, nuxt-gsap-module, nuxt-module, page-transitions
• Language: TypeScript
• Homepage:
• Size: 896 KB
• Stars: 292
• Watchers: 10
• Forks: 12
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE.txt
  • Codeowners: .github/codeowners

Awesome Lists containing this project

README

        
# Nuxt Gsap Module

GSAP module for Nuxt.

## Features

- Helps you integrate the GSAP animation library

- Provides a solution for global use

- Supports custom composables

- Automatically registers plugins after activation

- Allows you to easily register global effects & eases

- Supports Club GreenSock premium plugins

- Zero-config setup ready to go

- TypeScript friendly

- Super easy to use

## Quick Start

1. Install `@hypernym/nuxt-gsap` to your project

```sh

npm i -D @hypernym/nuxt-gsap

```

2. Enable the module in the main config file

```ts

// nuxt.config.ts

{

  modules: ['@hypernym/nuxt-gsap']

}

```

That's it!

## Module

The module comes with a zero-config setup so after activation it automatically adds the GSAP core and it is globally available without additional settings.

```html

  


    
Nuxt Gsap

  


  const { $gsap } = useNuxtApp()

  onMounted(() => {

    $gsap.to('.title', { rotation: 3, x: 100, duration: 1 })

  })

```

## Options

Nuxt Gsap Module is completely rewritten in TypeScript. It also improves the development experience with detailed descriptions, examples and code auto-completion.

After plugin activation, it is immediately available globally, so there is no need to manually import or register.

```ts

// nuxt.config.ts

{

  modules: ['@hypernym/nuxt-gsap'],

  gsap: {

    // Module options

  }

}

```

## GSAP Core

It can be used via a `provide` helper that will be available globally or via a custom `composable` that you can import where you need it.

### Provide

GSAP core is enabled by default on module activation.

```ts

// nuxt.config.ts

{

  modules: ['@hypernym/nuxt-gsap'],

}

```

**Available globally**

```html

  const { $gsap } = useNuxtApp()

  onMounted(() => {

    $gsap.to('.title', { rotation: 3, x: 100, duration: 1 })

  })

```

To disable the _provide_ helper completely, set it to `false`.

```ts

// nuxt.config.ts

{

  gsap: {

    provide: false

  }

}

```

### Composable

Imports the main `gsap` core as custom composable.

To enable custom [_composables_](#composables), set it to `true`:

```ts

// nuxt.config.ts

{

  gsap: {

    composables: true

  }

}

```

#### useGsap

- Custom composable

```html

  
Nuxt Gsap Module


  useGsap.to('.title', { rotation: 3, x: 100, duration: 1 })

```

```ts

// Explicit import (optional)

import { useGsap } from '#gsap'

```

## Documentation

Check the official [docs](./docs) for more info.

## Community

Feel free to use the official [discussions](https://github.com/hypernym-studio/nuxt-gsap/discussions) for any additional questions.

## License

### Gsap Platform

More details about GSAP licenses can be found in the official repository.

### Nuxt Gsap Module

Developed in 🇭🇷 Croatia

Released under the [MIT](LICENSE.txt) license.

© Hypernym Studio