Si un element tiene la clase .stagger , estoy tratando de ejecutar una animación que muestre las cartas una por una.
En mi demostración actual, todas las cards aparecen juntas. ¿Aunque he especificado un delay ?
¿Cómo puedo hacer que las tarjetas aparezcan una por una?
const boxes = gsap.utils.toArray('.stagger'); boxes.forEach((box, i) => { const anim = gsap.fromTo(box, { autoAlpha: 0, y: 50 }, { duration: 1, autoAlpha: 1, y: 0, delay: 0.5, }); ScrollTrigger.create({ trigger: box, animation: anim, toggleActions: 'play none none none', once: true, }); }); .section{ background: lightblue; padding: 100px 0; } <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script> <div class="section"> <div class="container"> <div class="row"> <div class="col-4"> <div class="card text-center stagger"> Card </div> </div> <div class="col-4"> <div class="card text-center stagger"> Card </div> </div> <div class="col-4"> <div class="card text-center stagger"> Card </div> </div> </div> </div> </div>En mi demostración actual, todas las tarjetas aparecen juntas. ¿A pesar de que he especificado un retraso?
Cada carta tiene un retraso de 0.5s , por lo que se moverán todas juntas.
Use un retraso basado en el índice de la tarjeta actual:
delay: 0.5 + (0.5 * i) Entonces, cada tarjeta se retrasará con ( 0.5s + medio segundo para cada índice)
const boxes = gsap.utils.toArray('.stagger'); boxes.forEach((box, i) => { const anim = gsap.fromTo(box, { autoAlpha: 0, y: 50 }, { duration: 1, autoAlpha: 1, y: 0, delay: 0.5 + (0.5 * i), }); ScrollTrigger.create({ trigger: box, animation: anim, toggleActions: 'play none none none', once: true, }); }); .section{ background: lightblue; padding: 100px 0; } <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script> <div class="section"> <div class="container"> <div class="row"> <div class="col-4"> <div class="card text-center stagger"> Card </div> </div> <div class="col-4"> <div class="card text-center stagger"> Card </div> </div> <div class="col-4"> <div class="card text-center stagger"> Card </div> </div> </div> </div> </div>