Combining ScrollToPlugin and ScrollTrigger in React

[Durostorum]

It's a copy of one of your community examples. However I've tried to add a ScrollTo functionality.  In development both of the implementations work, when I comment one of them out and if I have both of them ScrollTrigger takes precedent  and  the sections cannot be navigated through click.

So what could  be causing that and what should I do to fix it. 

https://codesandbox.io/s/summer-fog-1olq6

Codesandbox is being difficult and doesn't even run the ScrollTo function. 

[ZachSaucier]

Hey Durostorum and welcome to the GreenSock forums. I highly recommend that you check out this React + GSAP article by @Ihatetomatoes. In it, you will see that you should be using refs and not selector strings as your targets. I believe he's coming out with a full React + GSAP course soon, maybe you could try to get access to it  

 

Another issue is that your scrollTo click function is never being called.

 

A third issue is that when you try to call the following line the DOM is not ready so the target is null. It'd be best to wait until the DOM has loaded to apply it (and use a ref I believe):

// scroll down arrow animation
gsap.to(".arrow", { y: 12, ease: "power1.inOut", repeat: -1, yoyo: true });

 

[Durostorum]

Hi Zach and thank you for the reply. 
I saw Petr's short tutorial. A full course is still not available I believe. I did try to use refs, but it ref.current was returning the last instance of the reference. What threw me off was that even without refs both of the methods were working fine, before putting them together in the same file(did separate identical testing first). 

 

54 minutes ago, ZachSaucier said:

you should be using refs and not selector strings as your targets.

 

Your comment gave me direction and I'm going to try it again with better effort. Exactly what I needed. Though I should grab a Snickers first

[Ihatetomatoes]

Hi @Durostorum and @Zach, I see that you were talking about Rect + GSAP course. At the moment I am finalizing Practical GreenSock that will be purely with GSAP3, ScrollTrigger and vanilla JS.

 

Durostorum I know this won't be very helpful, but I suggest you start with a simple ScrollTrigger in React first, copy and paste from other demos is not the best way to learn. 

 

@Zach pointed you to my tutorial where you can learn how to target elements in React using useRef, hope it is useful. 

[ZachSaucier]

1 hour ago, Ihatetomatoes said:

At the moment I am finalizing Practical GreenSock that will be purely with GSAP3, ScrollTrigger and vanilla JS.

Ah, sorry. I thought it included React. My fault  

[Durostorum]

Hi everybody, it took me few days, but I followed the advice given earlier. While they helped I got many more questions. So I did start everything from scratch and ended up having a compromised version of what I wanted.

The pen includes horizontal parallax ScrollTo functionality. But I couldn't make that work with vertical ScrollTrigger. It does what it's supposed to do, but you have to scroll horizontally. I tried creating timeline reference for React but it wasn't applying the ScrollTrigger, so the scroll stayed horizontal.

Also if I'd have to set a secondary animation for each panel once slide#3 enters the viewport should I make a timeline reference and then chain 3 animations and would that be connected to the ScrollTo animation? Or what would be the correct approach there?

 

https://codesandbox.io/s/summer-fog-1olq6?file=/src/App.js

Any and all help is welcome.

[ZachSaucier]

5 minutes ago, Durostorum said:

The pen includes horizontal parallax ScrollTo functionality. But I couldn't make that work with vertical ScrollTrigger.

ScrollTrigger works with the natural scrolling of the page. So since in your demo you only have horizontal scrolling, you'd have to use horizontal: true with the ScrollTrigger(s) that you have. Alternatively you could do a fake horizontal scrolling like we show how to do in the horizontal scroll demos in the ScrollTrigger docs.

 

8 minutes ago, Durostorum said:

if I'd have to set a secondary animation for each panel once slide#3 enters the viewport should I make a timeline reference and then chain 3 animations and would that be connected to the ScrollTo animation? Or what would be the correct approach there?

I'd use a ScrollTrigger and attach an animation to it. 

[Durostorum]

4 hours ago, ZachSaucier said:

ScrollTrigger works with the natural scrolling of the page. So since in your demo you only have horizontal scrolling, you'd have to use horizontal: true with the ScrollTrigger(s) that you have. Alternatively you could do a fake horizontal scrolling

 As you said, currently the page follows it's natural scrolling, that is because I've failed at implementing gsap's ScrollTrigger functionality. 

 const tl = useRef(
    gsap.timeline({
      defaults: { ease: "none" },
    })
  );
  useEffect(() => {
    tl.current.to(linkRef.current, {
      scrollTrigger: {
        trigger: containerRef.current,
        horizontal: true,
        start: "left right",
        end: "left left",
      },
    });
  }, []);

That was my latest attempt, but it doesn't change anything.

[ZachSaucier]

4 minutes ago, Durostorum said:

tl.current.to(linkRef.current, { scrollTrigger: { trigger: containerRef.current, horizontal: true, start: "left right", end: "left left", }, });

Your tween and ScrollTrigger both do nothing (no properties changing, no callbacks), so of course the ScrollTrigger is not going to do anything  

 

Also your start end positions don't make much sense given the container starts at "left left".

 

Try this:

tl.current.to(linkRef.current, {
  color: 'red',
  scrollTrigger: {
    trigger: containerRef.current,
    horizontal: true,
    start: "left left",
    end: "right right",
    scrub: true,
    onUpdate: (self) => console.log(self.progress)
  }
});