chuck77

Ok, I got the minimal demo running https://codesandbox.io/s/gsap-targeting-multiple-refs-troubleshooting-lqqyby?file=/src/BackgroundMedia.js In the BackgroundMedia.js file, there are two refs, one for the image and one for the video - bgImgRef, and bgVidRef In the default state, I created a four timelines since both bgImgRef and bgVidRef have both fade-in and fade-out animations. Both of the fade-in timelines are identical, and both of the fade-out timelines are identical (except for the refs targeted). This works fine, but only because each timeline is targeting one ref only. To test the targeting of refs with an array of refs, lines 125 to 153 can be commented out to disable the bgImgRef timelines. Then, also comment in line 97 and line 114 to enable the targeting of the array of refs. Comment out line 98 and line 115 to disable the targeting of the single refs. This will throw the same error that I mentioned in the previous post.

Thanks @Cassie! I tried this out just now like you mentioned: .to([bgVideoRef.current, bgImg.current],{ opacity: 0, ease: fadeEase, },'<'); but came across an error: Unhandled Runtime Error TypeError: Cannot read properties of null (reading '_gsap') The error points to the "." before the "fromTo" on this line: customTimeline = gsap.timeline({ scrollTrigger: bgFadeInProps() }).fromTo(.... As soon as I take the bgVideoRef.current or the bgImg.current out of the array (just one), then it works fine again. What could be causing this?

While working on a GSAP timeline, I switched from targeting IDs to targeting refs. Now, I know that this code worked with targeting both #bgVideo and #bgImg: customTimeline = gsap .timeline({ scrollTrigger: bgFadeProps(), }) .fromTo( '#bgVideo, #bgImg', { opacity: 1, }, { opacity: 0, ease: fadeEase, }, '<' ); However, as soon as I switched both elements to refs, it doesn't seem to work the way I expected: customTimeline = gsap .timeline({ scrollTrigger: bgFadeProps(), }) .fromTo( `${bgVideoRef.current}, ${bgImg.current}`, { opacity: 1, }, { opacity: 0, ease: fadeEase, }, '<' ); I realize that the solution may also be super simple since GSAP is using querySelectorAll() under the hood, but I couldn't find other examples or this yet. What would be the right way to select these refs?

I finally got it to work! I noticed that the background video that I was targeting was the children of another scrolltrigger component that I created with its own refs, etc. So I refactored the code to not use the custom scrolltrigger component and it works perfectly fine even with the refs. That is, any scrollTrigger containers that were needed was contained within this component only. Of course, it was all added in a gsap context too.

Thank you @Rodrigo! I refactored my code to add the video fade-in timeline to the gsap context in a useEffect. It's (almost) working right now. At the moment, the fade-in timeline only works properly if I save my code and let it auto-refresh with the live server. However, if I manually refresh the page myself, the fade-in timeline does not work. What could this mean? Here is what my refactored code looks like: useEffect(() => { ctx.add(() => { fadeInTimeline = gsap.timeline({ scrollTrigger: bgFadeInProps(), paused: true, repeat: 0 }).fromTo( // '#bgVideoComp', `#${vidId}`, { opacity: 0, background: 'black' }, { opacity: 1, background: 'black', } ); }); return () => ctx.revert(); }, []); Also, additional insight I just saw now - This is showing in my console: Once again, everything works fine if I let the live server upload the page, but doesn't work if I refresh it myself.

Hello GSAP! I created a reusable React component which displays a background video when the user has entered the frame. Likewise, when the user leaves the frame, the background video is hidden from view. However, I also need to fade in and fade out the background video using a scrollTrigger to control the fade effect. The reusable React component works fine when I assign a static ID (#bgVideoComp) to the video tag and then use a gsap timeline with a scrollTrigger to control to fade-in and fade-out of the video. However, since this component is to be reused more than once, I opted to generate a unique dynamic ID (let's say #vid1, #vid2, #vid3, etc.) for the video tag each time this component is called. What I noticed is that targeting a dynamic ID in the gsap timeline doesn't seem to work (the video fade-in and fade-out no longer occurs). This is what a snippet of the GSAP timeline code looks like: bgFadeStartTl.current = gsap.timeline({ scrollTrigger: bgFadeInProps(), paused: true, repeat: 0 }).fromTo( // '#bgVideoComp', `#${vidId}`, { opacity: 0, background: 'black' }, { opacity: 1, background: 'black', } ); The bgFadeInProps() is simply a function that stores the scrollTrigger properties. However, this code has remained unchanged between the static ID and dynamic ID implementations: function bgFadeInProps() { let bgFadeInProps = { trigger: '#bgFadeScrolly', start: 'top 80%', end: 'top 70%', scrub: true, }; bgFadeInProps = { ...bgFadeInProps, ...bgFadeInSx }; return bgFadeInProps; } Also, the video tag on which the ID is attached looks like this: <video // id="bgVideoComp" id={vidId} style={{ opacity: '1', display: 'block', position: 'fixed', left: '0', right: '0', bottom: '0', minHeight: '100%', minWidth: '100%', zIndex: '-1', width: '100%', objectFit: 'cover', }} autoPlay={true} loop muted playsInline > <source src={vidSrc} /> </video> Are there some common mistakes that I should look out for?

Hello! I have been putting together a custom version of a scrollTrigger component for my React app. This component uses all the existing scrollTrigger props while adding some of my additional props to make it more suited for my app. With the way that I have structured it, most of the props just simply pass through to native scrollTrigger through a ...rest prop. However, I would also like to add Typescript checking to this custom component. I know that scrollTrigger already has its own types baked in. I also just started looking more into Typescript recently so it's a little new to me. What would be the best way to leverage those types? And, how would I specify them properly for the ...rest prop? The start and end props are following the same types signature as gsap but I am not too familiar with how to reference the StartEndFunc in there. Here is a snippet of what the custom scrollTrigger component looks like: interface myInterface { id: string, sx: SxProps, setAction: React.Dispatch<React.SetStateAction<State>>, children: JSX.Element, start: string | number | StartEndFunc, end: string | number | StartEndFunc, delay: number, skip: boolean, debug: boolean, disableTrigger: boolean, } export default function ScrollTriggerBox({ id, sx, setAction, children, start = 'top center', end = 'center top', delay = 0, skip = false, debug = false, disableTrigger = false, // disable scrollTrigger ...rest // pass in the rest of the props, like onEnter, onUpdate, etc. }: myInterface) { useEffect(() => { let ctx = gsap.context(() => { ScrollTrigger.create({ trigger: ref.current, start, end, markers: debug && true, ...rest, }); // More code goes here }); return () => ctx.revert(); }, [setAction]); }); Thanks!

Thank you @Rodrigo! I got it to work properly with gsap context. However, what I don't fully understand is how this fixed the react state so that it persists when using it on scrollTrigger events like onComplete, onEnter, etc. Is it because my previous method did not access React context, making the state not actually recorded?

Hello, First of all, I want to say that GSAP has been a fantastic product that has solved many problems for me. I really enjoy using it for my projects! Lately, I started to use scrollTrigger with React and I noticed a strange behaviour. In my minimal codesandbox example, I designed it so that the scrollTrigger is only allow to slide the "door" div to the right during onEnter on the first time only. I am using React state in "iterCount" to prevent the door div from triggering any subsequent time. However, when I console.log the iterCount state, it appears that the scrollTrigger never received the updated iterCount after it was incremented by the onComplete event. Meanwhile, the iteration count is correctly incrementing in the React App itself in the counter at the top of the page. What is missing here? https://codesandbox.a/s/gsap-updating-state-hooks-sliding-door-xucoo0