DEV Community

Cover image for Setting up GSAP's ScrollTrigger with Nuxt 3🔧🚀

Setting up GSAP's ScrollTrigger with Nuxt 3🔧🚀

Fitra Rahmamuliani on February 19, 2024

Introduction Navigating the fusion of GSAP's ScrollTrigger with Nuxt 3 is an adventure filled with potential, but it's not without its s...
Read full post
Collapse
 
rhernandog profile image
Rodrigo Hernando • • Edited

Hi,

This is Rodrigo from the GSAP Team!

We'd like to know if you could share a repo that we can take a look at in order to help you with the issue(s) you're having.

I've created a simple demo using the latest versions of Nuxt and GSAP, using ScrollTrigger with pinning and I wasn't able to replicate any of the problems you mention in the article.

Repo:
github.com/rhernandog/nuxt3-scroll...
Deployment in Netlify:
nuxt-scrolltrigger-test.netlify.app/

Sometimes we see that a 500 error comes from the fact that a ScrollTrigger instance could be created outside an onMounted() hook, which makes total sense since there is no need to run GSAP code in the server.

Also hydration mismatching can stem from using pinning on your ScrollTrigger instances. In order t make pinning work ScrollTrigger adds a DOM element around the element being pinned, but that element is not present in the server when the page is rendered, so obviously the DOM structure doesn't match the one in the client. For that ScrollTrigger has a configuration called pinSpacer which allows you to use a node already present in the DOM for pinning:

<div id="myPinWrapper">
  <div class="content>
    <!-- YOUR CONTENT HERE -->
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode 
onMounted(() => {
  gsap.to(".element", {
    rotation: 360,
    scrollTrigger: {
      trigger: ".content",
      start: "top top",
      end: "+=100%",
      pin: true,
      pinSpacer: "#myPinWrapper",
    },
  });
});
Enter fullscreen mode Exit fullscreen mode

In the demo I created I'm using pinning without the pinSpacer config option because I didn't ran into any hydration issue neither on development, building/preview and in the deployed app.

As mentioned it would be ideal to see a basic implementation that repeats the error you were having and if you like you can start a thread in our support forum and we can link that here as well so other users can benefit not only of your generosity by writing and sharing this article but also the discussion and solution of the issue(s) in our forums.

Best regards,
Rodrigo.

Collapse
 
fitrakun profile image
Fitra Rahmamuliani •

Hi Rodrigo,

Thank you so much for your detailed response and for sharing your demo. I really appreciate your input and the time you took to help.

I did encounter the error you mentioned about the ScrollTrigger instance outside of the onMounted() hook, but I managed to resolve it using the steps outlined in the article. Ensuring GSAP code runs only on the client side within the onMounted() hook was indeed crucial.

Your pinSpacer configuration is very helpful and will definitely use it in future projects. Unfortunately, I can't share the project code as it is confidential. However, I hope the explanations in my article provide enough clarity for others facing similar issues.

Thanks again for your insights and assistance. It's great to connect with you through my article!

Best regards,
Fitra