GSAP/React - Scroll Direction / useState

[Steve Giorgi]

What would be the best way to pass and use scroll direction from ScrollTrigger within React?  In vanilia JS it is incredibly simple, we just look at onUpdate: self => updateScrollDirection(self.progress), but in React it's seemingly much more complex.  I'm assigning this via a useState but when passing the state into useEffect it does all sorts of crazy stuff to the tween(s).

 

I'm trying to trigger a timeline that is outside of my main scrubbed timeline, forwards and backwards.

 

I did have it working but refactored my code because of other weirdness - if I simply place everything into one useEffect it works, however reverse() doesn't playback from the correct time (I've tried to set the position).

 

 

This is just reference not really part of the question:

 

const [scrollDirection, setScrollDirection] = useState(true)

useEffect(() => {
    ScrollTrigger.create({
      trigger: sectionRef.current,
      pin: true,
      scrub: true,
      animation: tlMaster.current,
      onUpdate: self => updateScrollDirection(self.progress),
    })
    const updateScrollDirection = progress => {
      progress === 1 ? setScrollDirection(true) : setScrollDirection(false)
    }

    tlMaster.current.add(tlScene1.current)
  }, [tlMaster])

useEffect(() => {
    tlScene1.current
      .fromTo(containerRef.current, { height: 0 }, { height: "100%", duration: 0.6 })

      .call(() => {
        scrollDirection ? tlScene1TextBlock.current.play() : tlScene1TextBlock.current.reverse()
      })
  }, [scrollDirection])

 

 

[OSUblake]

Hi @Steve Giorgi

 

It might be a good idea to create your scroll triggers inside a useLayoutEffect, especially if you are using a router.

 

 

19 hours ago, Steve Giorgi said:

I'm assigning this via a useState but when passing the state into useEffect it does all sorts of crazy stuff to the tween(s).

 

This is adding a new animation to the tlScene1 timeline every time the scroll direction changes.

 

19 hours ago, Steve Giorgi said:

useEffect(() => {
    tlScene1.current
      .fromTo(containerRef.current, { height: 0 }, { height: "100%", duration: 0.6 })

      .call(() => {
        scrollDirection ? tlScene1TextBlock.current.play() : tlScene1TextBlock.current.reverse()
      })
  }, [scrollDirection])

 

 

Do you think you can put that in a codesandbox? You have a lot of interconnected parts there, and I'm just trying to understand how you have everything set up.

 

 

[elegantseagulls]

21 hours ago, Steve Giorgi said:

useState but when passing the state into useEffect it does all sorts of crazy stuff to the tween(s).

Basically with this you're basically re-render/re-running your everything inside your useEffect (namely your fromTo). you may consider having your fromTo setup as a ref, and running a play() on that, so that a new fromTo isn't being added to your timeline everytime your direction changes.  But like Blake said, a sandbox would be really helpful to see/debug what's happening.