<div class="box green"></div>
<div class="box orange"></div>
<div class="nav">
<button id="play">play()</button>
<button id="pause">pause()</button>
<button id="resume">resume()</button>
<button id="reverse">reverse()</button>
<button id="restart">restart()</button>
</div>body {
margin: 10px;
}
.box {
display: block;
width:50px;
height:50px;
background:tomato;
margin-bottom:20px;
}
button {
text-transform: none;
}
.orange {
background-color: orange;
}var play = document.querySelector("#play");
var pause = document.querySelector("#pause");
var resume = document.querySelector("#resume");
var reverse = document.querySelector("#reverse");
var restart = document.querySelector("#restart");
var tl = gsap.timeline({paused: true});
tl.to(".green", {duration: 1, x: 200})
.to(".orange", {duration: 1, x: 200, scale: 0.5}, "+=1")
play.onclick = function() {
tl.play();
}
pause.onclick = function() {
tl.pause();
}
resume.onclick = function() {
tl.resume();
}
reverse.onclick = function() {
tl.reverse();
}
restart.onclick = function() {
tl.restart();
}
External CSS
This Pen doesn't use any external CSS resources.