Pin Element Scroll GSAP + Scrolltrigger + React

[Jhosep R 3 Likes (Newbie)]

Hola comunidad, hice un ejemplo de un elemento pin con gsap y reaccion, creo que lo hice bien, me gustaria saber si hay alguna forma de optimizar el codigo o si esta bien planeado, intente hacer un arreglo con utils para lograr el efecto del texto pero no lo conseguí, solo pude hacerlo usando cada componente individualmente, ¿es posible lograr ese efecto con "gsap.utils.toArray"?

 

Caja de arena:  https://codesandbox.io/s/gsap-react-pin-scroll-24c7fc?file=/src/App.js

 

[alig01 85 Likes (Contributor)]

Hey,

 

I think you are looking for something like this 

const pinSlider = useRef();

  useLayoutEffect(() => {
    let ctx = gsap.context(() => {
      let contents = gsap.utils.toArray(".content");
      gsap.set(contents, { autoAlpha: 0, y: 500 });
      
      let tl = gsap.timeline({
        scrollTrigger: {
          trigger: pinSlider.current,
          scrub: true,
          pin: true,
          start: "top top",
          end: "+=3000 bottom",
          markers: true
        }
      });      

      contents.forEach((content) => {
        tl.to(content, {
          keyframes: { y: [500, 185, -325] },
          duration: 5,
          autoAlpha: 1
        });
      });
    }, pinSlider);
    return () => ctx.revert();
  },[]);

Just make sure you remove the numbers from your divs and the refs which are no longer needed.

 

Hope this helps.

[Jhosep R 3 Likes (Newbie)]

@alig01 Wow, Thats great!, nice use for the "forEach" for this, thanks for teaching me !.