Necesito crear un efecto de pasta giratoria. Para esto descargué animejs . Coloqué los puntos donde necesito detenerme para el efecto de rotación.
También configuro el alcance, cuando el usuario ve el bloque, se produce la rotación.
El problema es que no puedo ajustar la suavidad, necesito crear un efecto de rotación, pero debido a la posición de background-positon , se obtiene el efecto de movimiento.
Solo puedo usar esta imagen y esta propiedad, ¿cómo puedo hacer eso?
No estoy seguro de cómo usar anime.js aquí y por qué, pero se puede hacer fácilmente con CSS/JS puro:
const el = document.getElementById("App"); const observer = new window.IntersectionObserver( ([entry]) => el.classList.toggle('spin', entry.isIntersecting), {root: null, threshold: .2} ); observer.observe(el); #App { height: 90vh; width: 40.67vh; margin: 23em auto; background: url("https://i.imgur.com/EI2qVf1.jpeg") no-repeat 0 0 / 5500% 100%; } .spin { animation: spin 2s steps(54) infinite; } @keyframes spin { to {background-position: 100%} } Scroll down <div id="App"></div>