<div class="body">
<img id="logo" src="data:image/png;base64,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" width="150px" />
<div class="mt-4">
<button id="play">PLAY</button>
<button id="pause">PAUSE</button>
<button id="reverse">REVERSE</button>
<button id="restart">RESTART</button>
</div>
</div>
.body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.mt-4 {
margin-top: 20px;
}
gsap.set('#logo', {transformOrigin: '50%'})
const logo = gsap.fromTo('#logo',
{ opacity: 0, x: -400 },
{opacity: 1, x: 400, rotation: 720, duration: 4 }
)
document.querySelector('#play').onclick = () => logo.play()
document.querySelector('#reverse').onclick = () => logo.reverse()
document.querySelector('#pause').onclick = () => logo.pause()
document.querySelector('#restart').onclick = () => logo.restart()
This Pen doesn't use any external CSS resources.