Using 'containerAnimation' in react for animations within a horizontal scroll?

[NathanD]

In part of my website It turns into horizontal scrolling. I am trying to create animations inside the horizontal scroll but it simply doesn't work. No matter the animation I put it does not scrub and it will just jump 300% in the negative y direction. 

 

I understand using 'conatinerAnimation' is the fix to this problem. I cannot seem to get my horizontal scroll animation to be accessed outside of the useLayoutEffect. This is what I currently have but no luck ?>

 

Any ideas??

 

  const panels = useRef([])
  const panelsContainer = useRef()

  const createPanelsRefs = (panel, index) => {
    panels.current[index] = panel
  }

  const [scrollTween, setScrollTween] = useState()

  useLayoutEffect(() => {
    const totalPanels = panels.current.length

    const scrollTween1 = gsap.to(panels.current, {
      xPercent: -100 * (totalPanels - 1),
      ease: 'none',
      scrollTrigger: {
        trigger: panelsContainer.current,
        pin: true,
        scrub: 1.5,
        // snap: 1 / (totalPanels - 1),
        end: () => '+=' + panelsContainer.current.offsetWidth,
      },
    })
    setScrollTween(scrollTween1)
  }, [])


  const homepagePanelTwoTitle2 = useRef()

  useLayoutEffect(() => {
    const tl = gsap.timeline({
      scrollTrigger: {
        trigger: '.homepage-panel-two-title-2',
        start: 'top center',
        end: '+=4000% center',
        scrub: true,
        containerAnimation: scrollTween,
        pin: true,
        markers: { startColor: 'yellow', endColor: 'blue' },
      },
    })

    tl.to(homepagePanelTwoTitle2.current, { x: '100%' })
  }, [])

 

 

 

[GSAP Helper]

It's super difficult to troubleshoot without a minimal demo, but I noticed you're not doing proper cleanup in your useLayoutEffect(), so perhaps the problem is that React 18 invokes your useLayoutEffect() TWICE in strict mode! Very annoying. It has caused a lot of headaches for a lot of people outside the GSAP community too.

 

In GSAP 3.11, we introduced a new gsap.context() feature that solves all of this for you. All you need to do is wrap your code in a context call, and then return a cleanup function that reverts things: 

// typically it's best to useLayoutEffect() instead of useEffect() to have React render the initial state properly from the very start.
useLayoutEffect(() => {
  let ctx = gsap.context(() => {
    // all your GSAP animation code here
  });
  return () => ctx.revert(); // <- cleanup!
}, []);

This makes proper cleanup so easy.

 

I'd strongly recommend reading the React article at https://greensock.com/react-basics

 

A few other minor notes: 

1. I'm not sure why you're using two different useLayoutEffect() calls. Why not merge those into one? That'd also let you reference the scrollTween directly.
2. It's almost always better to do xPercent: 100 instead of x: "100%" - use the dedicated percentage-based property for percentages so you can combine it with pixel (or other unit) based ones. 
3. end: "+=4000% center" isn't valid. If you're using a relative value like "+=4000%" you don't use the second value because it's irrelevant. You're just saying "4000% beyond wherever the 'start' is". 

 

If you're still having trouble here's a React starter template that you can fork and create a minimal demo so we can see the issue in context (get it? "context"? See what I did there?)

 

Happy tweening!

[NathanD]

Thanks I got it working. I added in the context and put everything into one layout effect. 

 

I cant put my actual project in a code pen because its much too large. So here is an example for the problem I am currently dealing with.

 

As you can see it is scroll horizontally but the animation will not pin. This is the exact problem I'm having I'm my project as well. what should I to make the animation pin and not disappear?

 

 

See the Pen dyqNgjG by Nathan-coder (@Nathan-coder) on CodePen

[Rodrigo]

Hi @NathanD and welcome to the GreenSock forums!

 

This was addressed in this thread:

For future references, please avoid creating duplicated threads in order to get a faster answer. We do our best to respond to all our users within 24 hours or less, regardless of the amount of threads they create, so rest assured that one you create a thread or post a follow up question in one that you or another user created, you'll get an answer as soon as we can provide it.

 

Let us know if you have more questions.

Happy Tweening!