NextJS 13 App Router - import Plugins

[iamsebastn 1 Likes (Newbie)]

Hey there! I hope I can find an expert who can help me out. 
I want to add ScrollTrigger and SplitText to my NextJS project. Inside of this project I'm using the new "App-Router". 
With that said, the problem occurs. The previous "_layout.js" file is now "layout.js". So to register PlugIns only once, I tried to import ScrollTrigger & Splittext like so:

import { ScrollTrigger } from 'gsap/dist/ScrollTrigger' // & gsap/ScrollTrigger doesn't work too
import { SplitText } from 'gsap/dist/SplitText' // & gsap/SplitText doesn't work too
gsap.registerPlugin(ScrollTrigger, SplitText)

This works fine at the first glance. Now I want to setup a Provider which provides all the scroll-animations. When I want to access ScrollTrigger or SplitText it "missing plugin"... so it isn't global..

But when I want to import & register the plugins into my provider I get this error on every page-reload.

Sooo I don't know what I can do. Hope somebody of you knows how to solve this problem. Or how to use the plugins probably with React in generall..

And I also have to mention, that those error only appear when is add the code

gsap.registerPlugin(ScrollTrigger, SplitText)

to the page..

[GreenSock 18,894 Likes (Superhero)]

Try moving the gsap.registerPlugin(...) line INSIDE your useEffect()/useLayoutEffect(). It looks like you're running that when there's no window/document defined at all.

[Rodrigo 5,913 Likes (Superhero)]

Hi,

 

On top of Jack's advice we have this starter template for Next with the app folder so you can take a look

 

https://stackblitz.com/edit/nextjs-ysf649

 

Hopefully this helps.

Happy Tweening!

[iamsebastn 1 Likes (Newbie)]

Thanks @Rodrigo & @GreenSock! 
i get it done. Forgot to use 

npm install gsap@npm:@gsap/shockingly

😅

Everything works fine! But Is it a usual that I get the message „1 high vulnerability found“ in my terminal when I use npm install gsap@npm:@gsap/shockingly and also the pagespeed goes down with splittert & scrolltrigger? Especially on mobile?
That‘s my running code. Unfortunately I can‘t provide a demo right now, cause I‘m on vacation hh

 

But thank you, for your feedback!

 

useIsomorphicLayoutEffect(() => {
      gsap.registerPlugin(ScrollTrigger, SplitText)

      const headlines = gsap.utils.toArray("[data-text='headline']")
      const body = gsap.utils.toArray("[data-text='body']")

      // headline Animation
      headlines.forEach((headline) => {
         let headlineSplit = new SplitText(headline, {
            type: 'words, chars',
         })
         let chars = headlineSplit.chars

         gsap.from(chars, {
            duration: 1.25,
            opacity: 0,
            scale: 1.25,
            ease: 'power2.inOut',
            stagger: {
               from: 'random',
               amount: 0.2,
            },
            scrollTrigger: {
               trigger: headline,
               start: 'top 92.5%',
            },
         })

         // paragraph animation
         body.forEach((text) => {
            let linesplit = new SplitText(text, {
               type: 'lines',
               linesClass: 'splitLine',
            })
            let lines = linesplit.lines

            gsap.from(lines, {
               duration: 1.5,
               opacity: 0,
               yPercent: 45,
               ease: 'power2.inOut',
               stagger: 0.15,
               scrollTrigger: {
                  trigger: lines,
                  start: 'top bottom',
               },
            })
         })
      })
   }, [])

 

[Rodrigo 5,913 Likes (Superhero)]

Hi,

 

We'll be here when you have the demo ready.

 

As for the vulnerability when installing GSAP, that most likely is tied to another package in the setup you have. Sometimes a third party package (that most likely you didn't even installed) that is being used by some library you're using, or is a peer dependency of some library you're using has some security issue or something like that. The last time I checked GSAP has none of those since is 100% agnostic, no dependencies at all and I can't think  of something in the code that could be considered a vulnerability. If there was a vulnerability there would be countless reports of that and we haven't received a single one.

 

Enjoy your vacations!

Happy Tweening!

[iamsebastn 1 Likes (Newbie)]

@Rodrigo hey there! Thank you for the explanation about the vulnerability! Didn't know that other packages can cause issues. I'm going to inpect this:)

Btw, Here's a demo! https://stackblitz.com/edit/nextjs-jtgqe2?file=README.md. 
So I decided to wrap the page in an provider for the scrolltrigger to work. My thought behind this approach was, that when I turn the layout.js page into a client-component the performance will decrease. But is this the right thought? Or am I wrong, that this doesn't affect performance. 

Thank you for helping!
 

[Rodrigo 5,913 Likes (Superhero)]

Hi,

 

Unfortunately I haven't had a lot of time to dig into Next's app router feature, which is something I have to do, but normally our advice is to test and then test some more. The example I posted before was made a bit in a rush just to show something that worked with GSAP and ScrollSmoother, so making those pages client components was just the first approach that I tried and worked, nothing more. This could work perfectly on the server with the right approach, maybe using the isomorphicLayoutEffect hook and running the register plugin inside a useEffect hook in the entry file of the app, but once again those are approaches that I haven't tried so I couldn't really tell you.

 

Finally when it comes to using either server or client components and performance, again you'll have to test. If there is a definitive evidence that one approach is better than the other, like the page taking an extra 2 or more seconds to load/render, or really hurting UX, then yeah maybe explore other approaches. If the difference between one and the other is just 200 milliseconds I wouldn't even bother about it, regardless of what some performance tool tells you. One thing is the performance tool score and sometimes a different thing is the UX and real life scenario.

 

Hopefully this helps.

Happy Tweening!