scrolltrigger horizontal scroll multiple elements in one section

[yahia]

i have a project in React.

gsap animation works fine, but when i add scroll trigger nothing happens

i hope the demo helps to illustrate what i mean. thanks a lot in advance.

 

https://codesandbox.io/s/intelligent-rain-866rkd?file=/src/Services.js

[GreenSock]

I'm not much of a React guy, but here are some quick comments/questions: 

1. You said you added ScrollTrigger, but it looks like all you did was import it but you didn't actually define any ScrollTriggers on any animations. Am I missing something? It's hard for me to understand what you want to happen. 
2. You're looping through an Array of elements to create tweens, but you're setting xPercent to -95 * (el.length - 2) but el is a DOM element, so why are you tapping into the "length" property like that? Did you mean to say cards.length? 
3. I actually think you meant to animate all the cards in one tween, so there's no need for your .forEach() loop (if my assumption is correct). 
4. You're not doing proper cleanup which React really needs, especially because it double-invokes useEffect()/useLayoutEffect() in strict mode, meaning you might accidentally be creating duplicate/conflicting animations/ScrollTriggers. gsap.context() is your new best friend in React because it makes cleanup so easy. I would HIGHLY recommend reading this article:
5. It looks quite strange to me that you've got an items.map(() => {...}) inside which you're assigning ref={pinItems.current} to EVERY Card. Refs should be unique to each element. This isn't related to GSAP at all - I just noticed that it looks strange React-wise. 

I'm really not sure what effect you're going for, but here's my stab in the dark: 

https://codesandbox.io/s/bold-goldberg-5y8784?file=/src/Services.js

 

I hope that helps!

[yahia]

Thanks a lot for your reply, help and time,

I'm doing a project and my demo is the home page that has few sections,

I use locomotive scroll and gsap together and it works fine till I get to services section. here's what I want, I want this section to scroll horizontally and cards to move to left as I scroll down the way, then when it finishes all cards, I go back to vertical scroll.

as u can see in my demo I have many cards and in order not to display them all I need to write them all and give each one unique refs. I was trying to display all of them using map() method and give each cards it's info from items.js. if you know better way please give me a hint.

 

thanks again man

[GreenSock]

11 hours ago, yahia said:

if you know better way please give me a hint.

I'm not a React guy, so I can't really help much there. We'd be happy to answer any GSAP-specific questions here, though. Good luck with your project.

[Rodrigo]

Hi,

 

Your example is not using GSAP Context and you should always use it when working with React. Implementing it is super simple as shown in the article link Jack shared in the previous post).

 

As for implementing Locomotive in React, yeah that can be a little tricky. @akapowl came up with this vanilla example for using Locomotive with horizontal sections:

See the Pen wvJroYy by akapowl (@akapowl) on CodePen

 

Also He has a very good example for using Locomotive with React in this thread:

Hopefully this helps.

Happy Tweening!