ScrollTrigges in array of elements

[camiloignaval]

Hello! I am trying to make a scrolltrigger functionality in an array of components in react that will appear as it goes down the page, but there is no way, I saw this page: https://greensock.com/forums/topic/25015-scrolltrigger- array-trigger/

but I can't get it to work in my code, as you can see even the markers work badly, someone has an idea that could help me please I would appreciate it, sorry for not making a codepen, but I don't know if it could be done in this case

 

 

import { gsap } from "gsap";

import React, { useEffect, useRef } from "react";

import { Trabajo } from "./Trabajo";

import "./trabajos.css";

 

export const Trabajos = () => {

    const ref = useRef(null);

 

    const listaTrabajos = [

        {

            nombre: "Cotizador criptomonedas",

            video: "https://www.youtube.com/embed/NnsSXNEciwY",

            desc: "Página para cotizar criptomonedas a distintas desde distintas monedas del mundo",

            techs: ["Javascript", "React", "Styled-Components", "Material-UI"],

            github: "https://github.com/Camiloignaval/cotizadorCriptos",

            pagina: "https://cotizadorcr.netlify.app/",

        },

        {

            nombre: "Cotizador criptomoneda2",

            video: "https://www.youtube.com/embed/NnsSXNEciwY",

            desc: "Página para cotizar criptomonedas desde distintas monedas del mundo",

            techs: ["Javascript", "React", "Styled-Components", "Material-UI"],

            github: "https://github.com/Camiloignaval/cotizadorCriptos",

        }

    ];

    // gsap.registerPlugin(ScrollTrigger);

    // const trabajos = document.querySelectorAll(".trabajo");

 

    // const tl = gsap.timeline({

    //  scrollTrigger: {

    //      trigger: ".trabajo",

    //      markers: true,

    //      start: "50% top%",

    //      end: "end end",

    //      scrub: true,

    //      toggleActions: "play none none reverse",

    //      pin: ".contenedorTrabajos",

    //  },

    // });

    // tl.from(".trabajo0", {

    //  rotation: 360,

    //  duration: 2,

    // });

 

    return (

        <>

            <div ref={ref} className='contenedorTrabajos row mx-auto my-auto'>

                {listaTrabajos.map((tr, i) => (

                    <div className={`trabajo trabajo${i}`} key={tr.nombre}>

                        <Trabajo

                            nameFoto={tr.nombre}

                            desc={tr.desc}

                            listTech={tr.techs}

                            git={tr.github}

                            video={tr.video}

                            pagina={tr.pagina}

                        />

                    </div>

                ))}

            </div>

        </>

    );

};

[OSUblake]

Hi camiloignaval,

 

I'm sure it's possible, but you're missing some fundamentals of working with React. I would highly recommend going through our React guides first, and then if you have any more questions, please provide a minimal demo. You can use CodeSandbox if you prefer an environment that is better suited for React.