React GSAP ref.current undefined inside onUpdate

[timduncan]

Hello, I am quite stuck with something and could really use a pair of extra eyes for the following code: 

 

gsap.to(wrapperRef.current, {
  scrollTrigger: {
    trigger: wrapperRef.current,
    pin: imgWrapRef.current,
    pinSpacing: true,
    start: "top top",
    end: "bottom bottom",
    scrub: true,
    markers: false,
    onUpdate: ({ progress }) => {
      if (progress > 0.5) {
        console.log(imgWrapRef.current)
        document.querySelector('img').setAttribute("data-hide", "true")
      } else {
        document.querySelector('img').setAttribute("data-hide", "false")
      }
    }
  }
})

 

and I can feel its so simple, but still can't understand why my console.log returns null. so basically I am in another scope and onUpdate doesn't know what's my ref.
does anyone have a suggestion of what's the fix? 
thanks a lot in advance. 

 

 

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Scope has nothing to do with it from what I can tell from your excerpt. Did you console.log() the same thing right above where you create the tween? Are you positive it's defined at any point? It could also be that in your React app, React removed the element and that's why current is null at that point. It's just impossible to tell by glancing at that one very small piece of the overall context. 

 

I'm sure it'll be much easier to diagnose one we see a minimal demo. 👍

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

Here's a React starter template.

[Rodrigo]

Hi @timduncanand welcome to the GreenSock forums!

 

the only reason I can think of is the you are actually creating the ref with the hook but you're not assigning it in your jsx using ref={imgWrapRef}.

 

unfortunately with the small code snippet you posted is impossible to tell.

 

Happy Tweening!