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?