Rotate In Card
GSAP で回転しながらフェードインするカード。
HTML
<div class="ri-card"> <div style="font-weight:700;font-size:15px">Rotated In</div> <div style="color:#999;font-size:12px;margin-top:4px">GSAP entrance</div> </div>
CSS
.ri-card {
width: 200px;
padding: 28px;
background: #fff;
border: 1px solid #eee;
border-radius: 12px;
text-align: center;
opacity: 0;
}
JavaScript
gsap.to('.ri-card', {
opacity: 1,
rotation: 0,
duration: .8,
ease: 'back.out(1.4)',
delay: .3,
from: { rotation: -8 },
});