How to target multiple refs in a GSAP timeline?

[chuck77]

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?

[Cassie]

Heya! looks like you're trying to construct a string of CSS selectors with a template literal - no need, Just pass an array, you're in JS land!

 

.to([bgVideoRef.current, bgImg.current],{
  opacity: 0,
  ease: fadeEase,
},'<');

 

CSS - '#element, #anotherElement'
JS - [var, anotherVar]

 

[chuck77]

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? 

[GreenSock]

It's very difficult to troubleshoot without a minimal demo (like a CodePen, Stackblitz, or CodeSandbox), but this looks very odd to me: 

scrollTrigger: bgFadeInProps()

Are you sure that bgFadeInProps() returns an element or selector text? My guess is that you're returning a React ref or null or something that's not a valid scrollTrigger value. If you'd like some help, please make sure you provide a minimal demo that clearly illustrates the issue and we'd be happy to take a peek. 

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

[GreenSock]

I don't have much time right now, but I glanced at your demo and bgVidRef.current is null. Try to do a console.log() right before you're feeding it into that tween and you'll see what I mean. That's probably your problem