Jump to content
Search Community

NextJS 13 App Router - import Plugins

iamsebastn test
Moderator Tag

Recommended Posts

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..


image.thumb.png.f22937e5f817edd5a3d9825c200b31dc.png

Bildschirmfoto 2023-05-25 um 16.50.02.png

Link to comment
Share on other sites

  • 3 weeks later...

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',
               },
            })
         })
      })
   }, [])

 

Link to comment
Share on other sites

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!

  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...

@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!
 

Link to comment
Share on other sites

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!

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...