GSAP Liquid Loader
GSAPで円がスプラッシュのように変形しながら回転するリキッドローダー。
HTML
<div class="gll-wrap"> <div class="gll-drop" id="gll-drop"></div> </div>
CSS
.gll-wrap {
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
}
.gll-drop {
width: 40px;
height: 40px;
background: #6366f1;
border-radius: 50%;
}
JavaScript
const drop = document.getElementById('gll-drop');
gsap.to(drop, {
borderRadius: '40% 60% 60% 40% / 60% 30% 70% 40%',
rotation: 360,
duration: 2,
ease: 'none',
repeat: -1,
yoyo: false
});
gsap.to(drop, {
scaleX: 1.2,
scaleY: 0.8,
duration: 0.5,
ease: 'sine.inOut',
repeat: -1,
yoyo: true
});