<section>
<div class= "container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</section>
body {
display: flex;
justify-content: space-evenly;
margin-top: 200px;
}
.container {
margin: 1rem;
}
.box {
width: 50px;
height: 50px;
background: #44bba4;
display: inline-block;
}
img {
width: 200px;
}
View Compiled
gsap.to(".box", {
duration: 0.5,
y: -40,
rotate: 10,
ease: "power1",
yoyo: true,
repeat: -1,
stagger: {
amount: 0.5, // the total amount of time (in seconds) that gets split up among all the staggers.
from: 5 // the position in the array from which the stagger will emanate
}
});
View Compiled
This Pen doesn't use any external CSS resources.