<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
.box{ margin: 20px; width: 100px; height: 100px; }
.box1{ background: orange; }
gsap.to(".box1", { duration: 3, x: 200, opacity: 0.2, ease: 'steps(10)'});
gsap.to(".box1", { duration: 3, y: 200, opacity: 1, delay: 3});
gsap.to(".box1", { duration: 3, x: 0, width: 200, backgroundColor: 'red', delay: 6});
gsap.to(".box1", { duration: 3, y: 0, height: 200, delay: 9});
This Pen doesn't use any external CSS resources.