<div id="box1" class="box w-[50px] h-[50px] bg-blue-600 rounded-lg"></div>
<hr />
<div id="box2" class="box w-[50px] h-[50px] bg-blue-600 rounded-lg"></div>
<hr />
<div id="box3" class="box w-[50px] h-[50px] bg-blue-600 rounded-lg"></div>
<hr />
<div id="box4" class="box w-[50px] h-[50px] bg-blue-600 rounded-lg"></div>
<hr />
<div id="box5" class="box w-[50px] h-[50px] bg-blue-600 rounded-lg"></div>
<hr />
<div id="box6" class="box w-[50px] h-[50px] bg-blue-600 rounded-lg"></div>
<hr />const tl = gsap.timeline({
defaults: {
duration: 5,
x: 500,
ease: 'bounce.out',
},
});
tl.to('#box1', {}, 'start');
tl.to('#box2', {}, 'end');
tl.to('#box3', {}, '+=10');
tl.to('#box4', {}, '-=10');
tl.to('#box5', {}, '<');
tl.to('#box6', {}, '>');
External CSS
This Pen doesn't use any external CSS resources.