How to change the CSS for each item element in a horizontal slider.

[rlaydtjs]

I want to have different CSS variations for each item element in a horizontal slider.
For example, if my intentions are correct, the border radius of the first item should be 32px to 0px when scrolling.

See the Pen vYMdEQx by seankim1111 (@seankim1111) on CodePen

[Rodrigo]

Hi @rlaydtjs and welcome to the GSAP Forums!

 

Unfortunately your demo is not working, you can fork one of our React starter templates from Stackblitz:

https://stackblitz.com/@gsap-dev/collections/gsap-react-starters

 

Finally since GSAP 3.12, we have the useGSAP() hook (the NPM package is here) that simplifies creating and cleaning up animations in React (including Next, Remix, etc). It's a drop-in replacement for useEffect()/useLayoutEffect(). All the GSAP-related objects (animations, ScrollTriggers, etc.) created while the function executes get collected and then reverted when the hook gets torn down.

 

Here is how it works:

const container = useRef(); // the root level element of your component (for scoping selector text which is optional)

useGSAP(() => {
  // gsap code here...
}, { dependencies: [endX], scope: container }); // config object offers maximum flexibility

Or if you prefer, you can use the same method signature as useEffect():

useGSAP(() => {
  // gsap code here...
}, [endX]); // simple dependency Array setup like useEffect()

This pattern follows React's best practices.

 

We strongly recommend reading the React guide we've put together at https://gsap.com/resources/React/

 

Happy Tweening!