Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
camiloignaval

ScrollTrigges in array of elements

Recommended Posts

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>
        </>
    );
};

Screenshot_1.png

Link to comment
Share on other sites

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×