GSAP + REACT ScrollTrigger animation

[EA10]

Hey guys,  Gsap scrollTrigger doesnt work well as i expect, I'm trying to scroll the page horizontally when user scrolls with the vertical scrollbar, but it doesnt work 

here is the codesandbox url https://codesandbox.io/s/nifty-jasper-x9bu8s?file=/src/App.js

See the Pen App.js by s (@s) on CodePen.

[GSAP Helper]

Howdy, @EA10. Welcome to the forums.

 

I looked at the CodeSandbox and I think you may have forgotten to save your changes because it literally has no GSAP code in it at all. Can you provide a minimal demo that shows the issue in context? We'd love to help with any GSAP-related stuff. 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best.

 

Here's a React Starter Template that you can fork.

 

Also, I'd highly recommend reading this article - it'll show you exactly how to use GSAP in React. Remember, gsap.context() is your best friend in React. It makes cleanup super easy, plus selection scoping. 

 

Have fun!

[EA10]

@GSAP Helper i have reviewed and save the sandbox, you can check it out now.

 

[Rodrigo]

Hi,

 

A few things about your example:

1. You have two end points in your ScrollTrigger configuration:

   scrollTrigger: {
     trigger: parentContainer.current,
     start: "top top",
     end: "bottom bottom",
     pin: true,
     scrub: 1,
     snap: 1 / (sections.length - 1),
     // Duplicated end position
     end: () => "+=" + parentContainer.current.offsetWidth,
     invalidateOnRefresh: true,
   }

   Just use one of course.

2. You are using both the native match media object and ScrollTrigger's match media inside the native one. I've never seen anything like that but most likely that would cause some troubles. You should use just GSAP MatchMedia since it's a wrapper for GSAP Context which makes using it in React super easy and offers the same goodies Context does plus responsive code.

I forked your example using just GSAP MatchMedia and it seems to work as expected:

https://stackblitz.com/edit/vitejs-vite-vxddh9?file=src%2FApp.jsx&terminal=dev

 

Here you can read more about GSAP MatchMedia:

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

 

Hopefully this helps.

Happy Tweening!