I need to create a rotating paste effect. For this I downloaded animejs. I placed the points where I need to stop for the rotation effect.
I also set up the scope, when the user sees the block, then the rotation occurs.
The problem is that I can't adjust the smoothness, I need to create a rotation effect, but because of the background-positon, the movement effect is obtained.
I can only use this image and this property, how can I do that?
I'm not sure how to use anime.js here and why, but it can be done with pure CSS/JS easily:
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>