Setting up GSAP's ScrollTrigger with Nuxt 3🔧🚀
Tags: javascript, webdev, gsap, nuxt
Published: 2024-02-19 06:19:21

## Introduction
Navigating the fusion of GSAP's ScrollTrigger with Nuxt 3 is an adventure filled with potential, but it's not without its share of obstacles. Many developers, myself included, have grappled with challenges ranging from hydration client mismatches to mystifying errors like "entry.5cb7c34d.js:20 GSAP target .partner-wrapper not found." Join me on this exploration as we unravel the intricacies and triumph over the roadblocks together.

## The Initial Struggles
In the early stages of integrating GSAP's ScrollTrigger with Nuxt 3, many developers, including myself, encountered a series of challenges. From hydration client mismatches to perplexing errors like "entry.5cb7c34d.js:20 GSAP target .partner-wrapper not found," the road seemed daunting. To make matters worse, attempting to build and start the project resulted in a dreaded 500 error, persisting even in staging and production environments.

![Error Hydration](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rqjxqhk40fcv6a3vk0gf.png)

## Identifying the Solution
After extensive research, trial-and-error, and searching the solution in the gsap github issues, the solution to these issues finally emerged. The key lies in configuring Nuxt 3 to play nicely with GSAP's ScrollTrigger. Let's take a step-by-step look at the transformation.

## Step 1: Update Nuxt Config
Before: 
```javascript
    '@nuxtjs/i18n',
    'nuxt-simple-sitemap',
    'nuxt-api-party',
    '@nuxtjs/google-fonts'
  ],

  pinia: {
    autoImports: ['defineStore']
  },
```

After: 
```javascript
    '@nuxtjs/i18n',
    'nuxt-simple-sitemap',
    'nuxt-api-party',
    '@nuxtjs/google-fonts',
    '@hypernym/nuxt-gsap'
  ],

  gsap: {
    extraPlugins: {
      scrollTrigger: true,
      scrollTo: true
    }
  },

  pinia: {
    autoImports: ['defineStore']
  },
```

## Step 2: Refactor GSAP Imports
Before: 
```javascript
<script setup>
import gsap from 'gsap'
import { ScrollTrigger, ScrollToPlugin } from 'gsap/all'

gsap.registerPlugin(ScrollTrigger, ScrollToPlugin)
```

After: 
```javascript
<script setup>
const { $gsap, $ScrollTrigger } = useNuxtApp()
```

With these changes, your project should now be free from the dreaded 500 errors, and GSAP's ScrollTrigger should function seamlessly as intended.

## Step 3: Make sure to call the gsap and ScrollTrigger using $ and inside onMounted 

Before: 
```javascript
onMounted(() => {
  links.value = gsap.utils.toArray('ul.privacy-policy__sticky-nav li a')
  links.value.forEach(link => {
    const el = document.querySelector(link.getAttribute('href'))
    const linkST = ScrollTrigger.create({
      trigger: el,
      start: 'top'
    })

    ScrollTrigger.create({
      trigger: el,
      start: 'top 10%',
      end: '+=50%',
```

After: 
```javascript
onMounted(() => {
  links.value = $gsap.utils.toArray('ul.privacy-policy__sticky-nav li a')
  links.value.forEach(link => {
    const el = document.querySelector(link.getAttribute('href'))
    const linkST = $ScrollTrigger.create({
      trigger: el,
      start: 'top'
    })

    $ScrollTrigger.create({
      trigger: el,
      start: 'top 10%',
      end: '+=50%',
```

## Conclusion:
The journey from troubleshooting GSAP's ScrollTrigger in Nuxt 3 to achieving a smooth, error-free integration can be challenging, but armed with the right knowledge and configuration, success is within reach. By following the steps outlined in this article, you can overcome the obstacles and bring delightful scroll-triggered animations to your Nuxt 3 project.

Happy coding and scrolling!