[GSAP] Tween

<!-- wrap -->
<div class="wrap">
    <div class="green"></div>
    <div class="blue"></div>
    <div class="yellow"></div>

    <br><br><br><br><br><br>
    <button class="play">play</button>
    <button class="pause">pause</button>
    <button class="resume">resume</button>
    <button class="reverse">reverse</button>
    <button class="restart">restart</button>
</div>
<!--// wrap -->

<script>
    var tl = gsap.timeline();

    tl.to('.green',{
        duration: 1,
        x: 200
    })
    .to('.blue',{
        duration: 1,
        x: 200,
        scale: 0.2
    })
    .to('.yellow',{
        duration: 1,
        x: 200,
        scale: 2,
        y: 20
    });

    document.querySelector('.play').onclick = () => tl.play();
    document.querySelector('.pause').onclick = () => tl.pause();
    document.querySelector('.resume').onclick = () => tl.resume();
    document.querySelector('.reverse').onclick = () => tl.reverse();
    document.querySelector('.restart').onclick = () => tl.restart();
</script>

 

 

참고
https://gsap.com/docs/v3/GSAP/Tween/