Authentiq

By the way, for me it seems like the error ist still there, also in your fork. Just navigate to the "about" page, scroll all the way down, and refresh (sometimes more than one time).

Hi. Thank you for your answer. I don't think this relates to 'once' in my case. I just integrated and tested it in my real-life project, and I'm still getting the error. Once ist not used here. import { useRef } from 'react' import { gsap, ScrollTrigger, useGSAP } from '~/services/gsap' import * as Styled from './Circle.styled' const Circle = ({ speed, className, ...rest }) => { const containerRef = useRef() useGSAP( () => { if (!containerRef?.current) return ScrollTrigger.create({ end: 1, start: 0 }) gsap.to('[data-speed]', { ease: 'none', scrollTrigger: { invalidateOnRefresh: true, scrub: true, start: 'top bottom', trigger: containerRef.current }, y: (i, el) => { return ( containerRef.current.offsetHeight * parseFloat(el.getAttribute('data-speed')) ) } }) }, { dependencies: [containerRef], scope: containerRef } ) return ( <div ref={containerRef} className={className}> <Styled.Circle data-speed={speed} {...rest} /> </div> ) } export default Circle Other ideas?

Sorry i am not very familiar with codesandbox, but https://79mr6f-3000.csb.app/ preview:3000 should work, not? Alternative here a Stackblitz: https://stackblitz.com/edit/stackblitz-starters-mxw6gv

Unfortunately, I still have this error, which is caused by ScrollTrigger and is causing my entire app to crash in production. To isolate the problem, I have created a CodeSandbox. The error can be reproduced here. https://codesandbox.io/p/devbox/gsap-79mr6f 1. Navigate to the "Home" page. 2. Reload the page using a hard refresh. 3. Scroll all the way down. 4. Navigate to "About". The error can also be reproduced by scrolling all the way down on the "About" page and then hard refreshing the page. If the page is reloaded without scrolling down, there is no error. Do you have any suggestions for what might be wrong with the way ScrollTrigger is being used? The ScrollTriggers are integrated into the "HeroIntro" and "TextImage" components. I believe I'm using the commonly recommended methods and the new useGSAP hook. I'm actually quite a fan of GSAP, but the interaction with Next.js and ScrollTrigger is proving to be quite cumbersome.

Unfortunately, I have a very strange behavior after installing @gsap/react via yarn. I have installed GSAP in a premium version and deployed it to Vercel. Everything works and the license key is recognized. Exactly the same deployment, only adding @gsap/react, throws an error on Vercel: Request failed "403 Forbidden". ?

Thank you for your answer. This really seems to solve my problem, as far as i can see. First test ist positive, the described error is not showing anymore. I hope in deeper tests, this works. But useGSAP seems like a Gamechanger.

I've been working with GSAP for quite some time now, utilizing the GSAP Premium Version. Specifically, I integrate GSAP into next.js applications (SSR). I've reviewed numerous documentation resources on GSAP/next.js and believe I'm employing GSAP according to best practices. For the most part, everything functions smoothly. However, I'm encountering issues with the Scrolltrigger. Whenever I bind animations to a Scrolltrigger that uses a React Ref (useRef) as a "trigger," errors consistently arise. During the initial load of a very long page, components on the page utilizing a Scrolltrigger sometimes throw an error: "Cannot read properties of undefined (reading 'end')." This problem seems to be related to the Scrolltrigger not having an element available. It is also the case that if I set the trigger via React ref, an error is thrown, but if the trigger is set via CSS class, no error is displayed. scrollTrigger: { invalidateOnRefresh: true, start: 'top center', trigger: containerRef.current // throws errors sometimes } scrollTrigger: { invalidateOnRefresh: true, start: 'top center', trigger: '.container' // throws no error, seems not working properly all the time } According to the documentation, there's an option to set nullTargetWarn: false in gsap.config, but this doesn't suppress the errors being thrown. Somehow, this seems to be related to SSR of the component, as the errors seem to disappear when I don't load the React component via SSR. I'm employing common patterns, such as "useIsomorphicLayoutEffect" or checking within the hook if the Ref element exists. However, this doesn't seem to resolve the issue either. import { useEffect, useLayoutEffect } from 'react' export const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect const List = ({ title, titleSize = 2, subtitle, items }) => { const containerRef = useRef() const listItemsRef = useRef([]) useIsomorphicLayoutEffect(() => { if (!containerRef.current) return const ctx = gsap.context(() => { gsap.to( listItemsRef.current, { clipPath: 'polygon(0% 100%, 100% 100%, 100% 0%, 0% 0%)', duration: 1, opacity: 1, scrollTrigger: { invalidateOnRefresh: true, start: 'top center', trigger: containerRef.current }, stagger: 0.2, y: 0 }, 0 ) }, containerRef) return () => ctx.revert() }, []) return ( <div ref={containerRef}> ... gsap.config({ nullTargetWarn: false }) The error is quite ugly because on the production environment, the entire frontend crashes if the error is thrown and not caught manually. Does anyone have any tips on what might be causing this?