GSAP Timeline with embedded scrolltrigger not working with dynamic IDs

[chuck77]

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?

[Rodrigo]

Hi,

 

Use GSAP Context:

https://greensock.com/docs/v3/GSAP/gsap.context()

 

Scoping should become super useful in this particular scenario.

 

Also I suggest you to read the articles in this page:

 

Hopefully this helps.

Happy Tweening!

[chuck77]

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: 
 

Quote

 

GSAP target  not found. https://greensock.com

 

 

 

Once again, everything works fine if I let the live server upload the page, but doesn't work if I refresh it myself.

[Rodrigo]

Hi,

 

Without a minimal demo is really hard to find out what the issue could be. If you're using React you could fork our React + GSAP starter template:

https://stackblitz.com/edit/gsap-react-basic-f48716

 

Based on what you're saying, maybe the issue is related to some layout shifting caused because the videos are loaded and sized after ScrollTrigger makes it's calculations. Perhaps wait for the videos to be loaded and call ScrollTrigger.refresh() or create your ScrollTrigger instances after the videos are loaded. The reason that is working with hot reloading is because the video is already loaded and the dev server keeps all that after you change the code. Also I don't see markers in your code, when debugging ScrollTrigger always use markers, we see a lot of users overlook markers, but I can't tell how many issues have been solved after including markers.

 

Happy Tweening!

[chuck77]

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.