<div class="box"></div>
<div class="btn-area">
<button class="btn btn-play">시작</button>
<button class="btn btn-pause">정지</button>
<button class="btn btn-resume">재개</button>
<button class="btn btn-reverse">반전</button>
<button class="btn btn-restart">재시작</button>
</div>.box {
width: 100px;
height: 100px;
margin: 10px 0;
background: royalblue;
}
.btn-area {
margin-top: 50px;
}const motion = gsap.to('.box', {
width: 400,
x: 200,
duration: 5,
paused: true
});
document.querySelector('.btn-play').addEventListener('click', () => {
motion.play();
});
document.querySelector('.btn-pause').addEventListener('click', () => {
motion.pause();
});
document.querySelector('.btn-resume').addEventListener('click', () => {
motion.resume();
});
document.querySelector('.btn-reverse').addEventListener('click', () => {
motion.reverse();
});
document.querySelector('.btn-restart').addEventListener('click', () => {
motion.restart();
});
External CSS
This Pen doesn't use any external CSS resources.