JPPdesigns

Yeah it was left in from a previous implementation with a dependency array. Good news is this setup is working as expected in production. I wish I could post a video showing what it looks like in dev mode. A minimal demo is pretty time consuming so I will try to create one in the coming days but now the production version is working as expected 😅 AND I can test in storybook as opposed to nextjs dev mode. I guess we are in a better place. I will remove revertOnUpdate too. Will get back to you with a stackblitz

Yeah I am using the useGSAP hook. Below is my code snippet that I have ended up with which appears to work in my production build now but not in dev mode. Could dev mode be impacted by useEffect running twice in strict mode? useGSAP( () => { matchMediaRef.current = gsap.matchMedia().add( { isMobile: '(max-width: 768px)', isDesktop: '(min-width: 769px)', }, (context) => { const { isMobile } = context.conditions || {}; gsap.set(firstViewRef.current, { opacity: 1, lazy: false, }); gsap.set(scrolledViewRef.current, { lazy: false, opacity: 0, yPercent: 0, scale: 0.7, }); timelineRef.current = gsap .timeline({ scrollTrigger: { trigger: containerRef.current, start: 'top 44px', end: 'center 44px', invalidateOnRefresh: true, pin: true, pinSpacing: false, scrub: true, markers: isDev, }, }) .to(firstViewRef.current, { ...(isMobile ? { yPercent: -40, xPercent: -30, } : { yPercent: -38, xPercent: -15, }), opacity: 0.8, scale: 0.3, }) .to( scrolledViewRef.current, { opacity: 1, scale: 1, yPercent: 0, xPercent: 0, }, 0.2 ); } ); }, { scope: containerRef, revertOnUpdate: true, } );

Sorry @GreenSock really hard to create a stackblitz for this issue as there is SO much setup to give you a minimal demo... What I noticed is if I have a dependency array set and pinSpacing: false then the animation is all out of whack. I am on the latest version of everything With pinSpacing false in nextjs with pinSpacing false in Storybook

I am having serious issues with GSAP scroll trigger + NextJS 14.1.0. In storybook it works as you would expect, markers are in the correct place etc. As soon as I run the same components in my nextj app dev or production... My start & end markers are in totally different places with the same settings when rendered in storybook vs nextjs. You can see the start and end markers are overlapping in my next js version and the storybook version the start is where I would expect it to be

There is an open bug with yarn in which it fails to install private packages with no range... **sigh** https://github.com/yarnpkg/berry/issues/1816 You will also need to update your .yarnrc.yml file with the following: npmRegistries: https://npm.greensock.com: npmAuthToken: "TOKEN_HERE" npmAlwaysAuth: true npmScopes: gsap: npmRegistryServer: "https://npm.greensock.com" npmAuthToken: "TOKEN_HERE" npmAlwaysAuth: true and then the below should work yarn add gsap@npm:@gsap/shockingly@latest