<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
});
This Pen doesn't use any external CSS resources.