Share Posted January 23 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> </> ); }; Link to comment Share on other sites More sharing options...
Share Posted January 24 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. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now