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

I already understood my problem, and apparently I won't be able to solve it since the component is conditionally mounted later, but if you could help me why when refreshing the element, it remains transparent please

Hello! sorry I'm just starting with gsap, and I can't find the solution to these problems: The first is that when you want to mount the component again by clicking on 'quote' it appears with low opacity. And the second problem, is trying to use scrollTrigger, I can't make the animation display when I reach the icon, I have to go even lower from the screen so that the animation is just done Both problems can be seen in the screenshot and attached video, thank you very much in advance! I do not understand why the animation is not performed when reaching the object

you're the best! that was the problem! thousand thanks!

Hello! I have the following problem with onmouseEnter and onmouseLeave in react, when I move the mouse slowly it works without problems, but when I move the mouse quickly the images remain large, I don't understand please, if you could help me please, thank you very much I will leave a video with the sample, since I did not put it in codepen, and the code, thank you very much! pd: if you could help me if it is possible, that when you do mouseEnter, it stays in the middle of the screen and when you do mouseLeave, return to the position, but since it works with e.target, I have not been able to do it with the timeline play and reverse (). I tried anyway but I didn't succeed const onEnter = (e) => { setNombreLogo(e.target.alt); nameLogo.current.classList.add("mostrar"); e.target.classList.add("activo"); gsap.to(e.target, 1, { opacity: 1, rotate: 360, scale: 2, duration: 1, ease: "power3.in", }); }; const onLeave = (e) => { nameLogo.current.classList.remove("mostrar"); e.target.classList.remove("activo"); gsap.to(e.target, { opacity: 1, rotation: "-360", scale: 1, duration: 0.5, }); }; <h1 className='titleSkill titleFront pl-5 '>FRONTEND</h1> <div className='iconosFront d-flex row'> {front.map((logo) => ( <img onMouseEnter={onEnter} onMouseLeave={onLeave} key={logo} className='iconoFront' src={`../../assets/${logo}.png`} alt={logo} /> ))} </div> Video problem