В данном примере реализована анимация через последовательное изменения свойства "clip-path"
Но почему-то между состояниями нет плавного перехода. Как сделать анимацию плавной?
HTML
<section class="rotate">
<div class="rotate-polygon"></div>
</section>
CSS
.rotate{
width: 100vw;
height: 100vh;
background-color: black;
&-polygon {
width: 100vw;
height: 100vh;
background-color: red;
clip-path: polygon(0 25%, 100% 25%, 100% 75%, 0 75%);
}
}
JS
gsap.timeline({repeat: -1, repeatDelay: 1},{
scrollTrigger: {
trigger: ".rotate",
duration: 2,
}
})
.to(".rotate-polygon", {
"clip-path": "polygon(0 50%, 50% 0, 100% 50%, 50% 100%)",
ease: Power3.easeOut,
duration: 1,
}, )
.to(".rotate-polygon", {
"clip-path": "polygon(0 75%, 0 25%, 100% 25%, 100% 75%)",
ease: Power3.easeOut,
duration: 1,
});