Estoy activando una animación en varios elementos cuando están visibles en la ventana gráfica con puntos de ruta, pero tengo algunos problemas con las animaciones que no funcionan correctamente.
Lo que sucede aquí es que las animaciones se ven fluidas y correctas, pero se activan en todos los elementos cuando desplazo un nuevo elemento .secuencial en la ventana gráfica. Incluso los que ya están animados Esto es obviamente porque me dirijo a esa clase en el código. Puedes ver ese parpadeo.
Así es como se ve: https://watch.screencastify.com/v/cIKae7lQKMtw4zCXlTlG
Este es el código:
$('.sequential').waypoint(function() { var CSStransforms = anime({ targets: '.sequential', opacity: [0, 1], translateY: [50, 0], delay: anime.stagger(100), easing: 'cubicBezier(.71,-0.77,.43,1.67)' }); }, { offset: '100%' });Lo que debo hacer es apuntar a 'this.element' en el código en lugar de la clase. Funciona, pero la animación se dispara al mismo tiempo si hay varios elementos visibles y la animación no se ve tan bien.
Así es como se ve: https://watch.screencastify.com/v/69SVdcXsTywYeYuC6LwQ
Este es el código:
$('.sequential').waypoint(function() { var CSStransforms = anime({ targets: this.element, opacity: [0, 1], translateY: [50, 0], delay: anime.stagger(100), easing: 'cubicBezier(.71,-0.77,.43,1.67)' }); }, { offset: '100%' });¿Cómo puedo hacer que la animación sea más secuencial incluso si hay varios elementos visibles?
Si alguien está mirando. Así lo resolví finalmente. Resulta que tuve que apuntar a un elemento envolvente con waypints antes de poder llamar a la animación.
$(".anime").waypoint(function() { anime.timeline({ loop: false }).add({ targets: this.element.querySelectorAll('.sequential'), translateY: [50, 0], opacity: [0, 1], duration: 500, delay: (el, i) => 100 * i, easing: 'cubicBezier(.71,-0.77,.43,1.67)' }); }, { offset: '100%' });