Tengo una animación como esta (ejemplo anime.js ):
anime({ targets: '.selector', opacity: 0.5, translateX: 200, duration: 1, });Luego, necesito configurar el progreso de esta animación según la posición de desplazamiento de la página (o cualquier biblioteca js para desplazarse).
Por ejemplo:
"opacity:0.9;transform:translateX(40px);""opacity:0.75;transform:translateX(100px);"Me gustaría evitar calcular todos los valores de animación por mí mismo.
¿Hay herramientas integradas en anime.js / velocity.js o bibliotecas como estas?
gsap.js tiene un método .progress() que funciona según lo necesito, pero me gustaría encontrar una biblioteca más ligera para este propósito.
Sí, anime.js tiene funciones de búsqueda de progreso. El que estás buscando es seek() . Se usa así:
var animation = anime({ targets: '.selector', opacity: 0.5, translateX: 200, duration: 1, }); animation.seek(0.2 * animation.duration); animation.seek(0.5 * animation.duration);Se hace en milisegundos, por lo que hay que multiplicar por la duración de la animación. Pero para sus propósitos, simplemente conecte su progreso de desplazamiento dentro de un controlador de eventos de desplazamiento y todo funcionará bien.
animation.seek(scrollProgress * animation.duration);