RobbieC

Yup everything your saying makes sense. I'm also confused on the server/client components and how they work when "stacking" them, etc... i.e. having a client component with a child component that's a server component. I've asked questions as well in their discord but they don't always get answered. On that note, I'm just testing all of this on a rebuild im working on for my portfolio website, which probably won't be production ready for months, as to why I decided to use it to mess around with the beta app dir. I can be the guinea pig for testing gsap in the new app dir ?

@Rodrigo The example you provided does not work, get a bunch of errors in stackblitz.com But I would have to argue that maybe it shouldn't be directly in the `layout.js` since in your example your turning the `layout.js` into a client component, it may be better to create a `providers.js` file and have the scrollsmoother in there. https://beta.nextjs.org/docs/rendering/server-and-client-components#rendering-third-party-context-providers-in-server-components I updated my codesandbox as an example: https://codesandbox.io/p/github/robbiecren07/nextjs13-gsap/test

Ok so I pieced something together and put it on codesandbox, and after doing so the only issue I really see is that the header animation works on the first initial page that's loaded (so home page or any page you refresh on) but when you switch pages, it does not animate, but the other animations work. I also made a change and wrapped my const instance = ScrollSmoother.create() in a gsap.context() . The public link is: https://codesandbox.io/p/github/robbiecren07/nextjs13-gsap/draft/solitary-darkness Any help with the head component animation would be great, also any feedback on my code would be greatly appreciated! Oh and Happy Holidays GreenSock fam!

Sounds good @Rodrigo! @GreenSock - Ill put together a demo, I just through pieces of my code in here, they are actually pretty large components. I won't be able to make an exact duplicate of my projects but ill put something together. But In my project, the only thing not wrapped in the gsap.context() is this peace of code: const instance = ScrollSmoother.create({ smooth: 1, normalizeScroll: true, ignoreMobileResize: true, effects: true, }) setSmoother(instance) Should that also be inside of gsap.context ?

I hope its ok to ask, I'm looking for someone with some experience in the new Nextjs 13 app directory, using gsap; to hopefully help answer a couple questions I have. I'm not 100% sure it's all directly related to the new app dir system or just the fact that they are different client components. So the first question: In app/layout.js I have a <Header /> client component, in that component I'm using ScrollTrigger to show/hide the navigation bar based on scroll. In app/page.js I'm initializing the ScrollSmoother, so yes my page.js is a client component. In my app/projects/page.js I'm also initializing ScrollSmoother the same way I did in app/page.js. So the SmoothScroller works fine on both pages and during page changes, the issue im running into is that the ScrollTrigger in <Header /> stops working when I change pages. I'm guessing the issue is that on the page change, ScrollTrigger doesn't know what scroller to use because the <Header /> component doesn't change/re-render but the page.js does, almost like it needs to reinitialize when a new page component is rendered. My 2nd question is: Instead of making my page.js a client component, can/should I make a separate client component that initializes the smoothscroller, something like this: // components/SmoothScroller.js 'use client' import { useState } from 'react' import useIsomorphicLayoutEffect from '../utils/useIsomorphicLayoutEffect' import { gsap } from 'gsap' import { ScrollSmoother } from 'gsap/dist/ScrollSmoother' import { SmootherContext } from '../utils/SmootherContext' export default function SmoothScroller({ children }) { const [smoother, setSmoother] = useState() useIsomorphicLayoutEffect(() => { gsap.registerPlugin(ScrollSmoother) const instance = ScrollSmoother.create({ smooth: 1, normalizeScroll: true, ignoreMobileResize: true, effects: true, }) setSmoother(instance) }, []) return ( <SmootherContext.Provider value={smoother}> <div id="smooth-wrapper"> <div id="smooth-content" className="will-change-transform"> {children} </div> </div> </SmootherContext.Provider> ) } The issue i've run into with using this SmoothScroller component is that when I use it like this on the page: // app/projects/page.js import SmoothScroller from '../../../components/SmoothScroller' import BlockTitle from '../../../components/BlockTitle' export default function Projects() { return ( <SmoothScroller> <section className="w-full py-[18vh] px overflow-hidden"> <BlockTitle title="Projects" /> <div className="container mx-auto"> <div className="flex"> <div className="h-screen"></div> <div className="h-screen"></div> </div> </div> </section> </SmoothScroller> ) } The <BlockTitle> is a client component which is using ScrollTrigger and SplitText, but the scrolltrigger never fires, the markers show up in the correct place and splittext works, its almost like it doesn't know what scroller to attach to. I know I should of created a codesandbox, so I will put one together this evening.

Oh sweet, thanks for the heads up @GreenSock !! On that note, I've read both of the learning gsap in react docs, but are there any other known issues or tweaks that need to be made with gsap when working in react 18? I'm also using Nextjs 13's new experimental app directory, which I'm guessing could bring up some bugs.

@Rodrigo I'm not sure if the codepen you created shows the issue I was having, but I applied your suggestion above: And this fixed the issue I was having. I'm able to do: splitAbout = new SplitText('.about_text', { type: 'lines, chars', linesClass: 's_parent', charsClass: 's_child' }) and it returns correctly, 1 div for the 'lines' and then 1 div for each 'chars'. Thanks!

@GreenSock Jack, can you try that link again? (first time using codesandbox, I forgot to commit the changes). If you go to /app/page.js - you will see gsap.context(), which I have the ctx.revert() - but im guessing that doesn't apply to the splittext within the scope?

I'm new to using gsap in react/nextjs but i've been following the docs and reading some other threads, but I can figure out what's going on with SplitText in my project. Basically I think SplitText is firing twice, all instances of SplitText in my example, you will see that they are wrapped twice in div's created by SplitText. I have not used codesandbox before but I just threw together a quick sandbox which you will be able to see the issue i'm talking about. https://codesandbox.io/p/github/robbiecren07/robbiecrenshaw.dev-nextjs/draft/

Oh, well you do make a good point! I'll have to figure out how to work in your example, cause all of my scrolltriggers/tweens are already nested inside of individual functions, broken down into each section of the page, kind of like: function init() { // code code code // onComplete: () => initContent() } init(); function initContent() { calcStyles(); initIntro(); initProjects(); initClients(); initServices(); initInvest(); initInitiatives(); initCTAs(); initFooter(); } function initIntro() { // all tweens/scrolltriggers for this section // each init function is the same idea }

Thanks Jack! I decided to try something a little different, my project is a little more complex than the example I gave above. This option I feel would work best for my situation, I just declare it at the top of my file: let startPosition; if (window.matchMedia("(max-width: 768px)").matches) { startPosition = 'top 80%'; // mobile } else { startPosition = 'top 60%'; // desktop } Then I just replace 'top 60%' on all my scrolltriggers with startPosition. I haven't fully tested it yet, but we shall see.

I wanted to know if there was a simpler way of adjusting the 'start' position of a scrolltrigger, instead of using ScrollTrigger.mediaMatch and duplicating all the code to only change 1 line. Example: gsap.to(".first", { duration: 1, autoAplha: 1, yPercent: 0, scrollTrigger: { trigger: container, start: "top 60%", end: "bottom bottom", toggleActions: "play none none reverse" } }); So if I wanted to just change "top 60%" to "top 80%" for max-width: 768px. Instead of doing: ScrollTrigger.matchMedia({ // desktop "(min-width: 769px)": function() { gsap.from(".first", { duration: 1, autoAplha: 1, yPercent: 0, scrollTrigger: { trigger: container, start: "top 60%", end: "bottom bottom", toggleActions: "play none none reverse" } }, { // mobile & tablet "(max-width: 768px)": function() { gsap.from(".first", { duration: 1, autoAplha: 1, yPercent: 0, scrollTrigger: { trigger: container, start: "top 80%", end: "bottom bottom", toggleActions: "play none none reverse" } }); It's not bad when its a simple single scrolltrigger, but when I have a project with lots of scrolltriggers and I need to adjust the start position for mobile on all of them, it will be a lot of extra code. Is there simpler/easier way?

Thank you @akapowl !! I initially had my ScrollerProxy set to #viewport BUT I didn't define the scroller for ScrollTrigger, so it wasn't working and when I was searching online I came across an example that had the ScrollerProzy set to document.body and I gave that a try and it seemed to work but as you can see.. it didn't.. ?

First I want to apologize for the amount of code that's in my CodePen, I had to scrap it from my project and make sure I could recreate the issue. In my project I'm using Smooth Scrollbar & Barba.js but I didn't include the Barba code because I was able to recreate the issue without it (plus can you even use barba.js page transitions in codepen?) Anyway the issue I'm having is when you scroll to the end of the page (or to the end of the 2nd pinned section), then resize the window and scroll back up the "portfolio" section is missing. If you inspect element you can see that the "portfolio" section seems like it is still stuck in the pinReparent; which is below all the script tags BUT it doesn't make sense because if you inspect element and watch the two pinReparent's happen; once you get to the end of both sections, the sections leave the pinReparent state but once you resize the window the portfolio section jumps back into the pinReparent state. This issue only happens on a window resize event, so I'm not sure if it's an issue with pinReparent, Smooth Scrollbar or my code. Before I added Smooth Scrollbar to my project I only had the portfolio section and the only way I could get that section to scroll correctly with Smooth Scrollbar was to add the pinReparent. The same goes for when I added the zoom section into the project, it wouldn't work without it. I have tried to add a couple different eventlisteners but that didn't help. Here is the most recent one I tried on my project: let allTriggers = ScrollTrigger.getAll(); ScrollTrigger.addEventListener("refresh", () => bodyScrollBar.update()); ScrollTrigger.refresh(); let progress = 0; ScrollTrigger.addEventListener("refreshInit", () => progress = allTriggers.progress ); ScrollTrigger.addEventListener("refresh", () => allTriggersscroll(progress * ScrollTrigger.maxScroll(window))); bodyScrollBar.addListener(ScrollTrigger.update); I also tried to wrap it in a window.addEventListener and some different variations but no luck. Another weird thing is the word "TEXT" that's in the portfolio section; jumps up once the pin/horizontal scrolling starts. I'm not sure why it does it in the CodePen but is does not do it in my project.

@ZachSaucier Can I ask if there was a particular reason why you used the backtick template literal on the scrolltrigger end property in your codepen above?