GSAP Morphing Bars Loader
5本のバーがGSAPタイムラインで波状に伸縮するローダー。
HTML
<div class="gmbl-wrap"> <div class="gmbl-bar"></div> <div class="gmbl-bar"></div> <div class="gmbl-bar"></div> <div class="gmbl-bar"></div> <div class="gmbl-bar"></div> </div>
CSS
.gmbl-wrap {
display: flex;
align-items: center;
gap: 4px;
height: 48px;
}
.gmbl-bar {
width: 6px;
height: 16px;
background: #6366f1;
border-radius: 3px;
}
JavaScript
const bars = document.querySelectorAll('.gmbl-bar');
const tl = gsap.timeline({ repeat: -1 });
bars.forEach(function(bar, i) {
tl.to(bar, {
height: 48,
duration: 0.3,
ease: 'power2.out',
}, i * 0.1);
tl.to(bar, {
height: 16,
duration: 0.3,
ease: 'power2.in',
}, i * 0.1 + 0.3);
});