how can I duplicate sections in gsap.context

[PavelZolotin]

I made a horizontal like in this example:

https://stackblitz.com/edit/react-cxv92j?file=src%2FApp.js

But how can I duplicate sections?
For example, forEach method, but it doesn't work with self.selector

See the Pen mdGyEbW by pavelzolotin (@pavelzolotin) on CodePen

[Rodrigo]

Hi @PavelZolotin and welcome to the GreenSock forums!

 

You mean something like this:

https://stackblitz.com/edit/react-pmv6ld?file=src%2FApp.js

 

If not, please create a minimal demo that clearly illustrates what you're trying to do and the issue you're  having.

Happy Tweening!

[PavelZolotin]

Hi @Rodrigo!

Something like that:

https://stackblitz.com/edit/react-ts-yopzt8?file=src%2FApp.jsx

I have the same working version but on native js:

See the Pen jOvEMNN by pavelzolotin (@pavelzolotin) on CodePen

[elegantseagulls]

1 hour ago, PavelZolotin said:

I have the same working version but on native js

It looks like maybe you're still setting this up, as it's changed a few times as I've refreshed.

 

thisAnimWrap.scrollWidth and window.innerWidth are putting out the same value, so your gsap is tweening from 0 to 0.

[PavelZolotin]

Hi @elegantseagulls!

I'm done doing what I can:)
How do I make projects animate one after another in the React version like it's done in native JS.
The forEach method doesn't work in conjunction with self.selector.
At the moment, the animations of the projects overlap each other when scrolling. 

[PavelZolotin]

Hi there!

This is the only way it worked for me:
https://stackblitz.com/edit/react-ts-yopzt8?file=src%2FApp.jsx
Yes, there are no indents, but the meaning of the animation seems clear.

 

I only had to have one generic ref={main} for the whole container and use "selector" for projects divs, and then go through this selector by forEach method and use for internal divs - querySelector instead of ref.current-links like I did before.

As far as I know, using querySelector instead of ref, is a React bad practice.
Is there a cleaner solution to my problem? 

[Rodrigo]

Hi,

 

I'm not sure I follow exactly what is the issue you're having right now. The only problem I see in your code is the end point of your ScrollTrigger configurations:

scrollTrigger: {
  trigger: proj,
  start: 'top top',
  end: () => '+=' + (animWrap.scrollWidth - window.innerWidth),
  pin: wrap,
  scrub: true,
},

If you log that you'll get a negative value, so you're telling ScrollTrigger that your animation will end before it starts.

 

This seems to work as you intend:

https://stackblitz.com/edit/react-ts-rukknu?file=src%2FApp.jsx

 

As for query selector being a bad practice, that's a deep rabbit hole that I don't intend to go through. One of the main reasons I'm not a big fan of React is because the React team takes too much responsibility away from developers. Why? Because they always preventing users from doing this or that, or not doing things the React way, or saying that something is an anti-pattern, etc. Using a regular query selector is completely fine as long as you know that the target element IS in the DOM. As developers is our responsibility to know exactly when an element is or isn't rendered in the DOM. If you don't know then, IMHO, you have other problems that don't relate to selectors being a bad practice or any nonsense like that. In this cases is most about when the element is in the DOM and as we write the code of our apps and components we should know the logic that tells us when something is in the DOM and when is not. Then you have lifecycle hooks that allow you to make changes so nothing breaks your app. Finally GSAP Context provides great help when developing apps in React with GSAP.

 

Hopefully this helps.

Happy Tweening!

[PavelZolotin]

Hi @Rodrigo, thank you so much!