<div class="box box1">from</div>
<div class="box box2">fromTo</div>
.box {
  width: 100px;
  height: 100px;
  margin: 10px 0;
}
.box1 {
  background: royalblue;
}
.box2 {
  background: orange;
}
gsap.from('.box1', {
  x: 200,
  width: 300,
  height: 300,
  opacity: .2,
  duration: 3
});

gsap.fromTo('.box2', {
  // from 
  scale: 0.85,
  opacity: 0,
  x: 80,
  y: 80,
  backgroundColor: 'red'
}, {
  // to
  scale: 1,
  opacity: 1,
  x: 0,
  y: 0,
  backgroundColor: 'orange',
  duration: 3
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://unpkg.co/gsap@3/dist/gsap.min.js