Getting Started

<div class="h-screen pt-12 bg-black">

    <div class="flex justify-center gap-x-20">
        <img class="logo h-32" src="/images/greensock-logo.svg" alt="GreenSock superhero logo">
        <img class="logo2 h-32" src="/images/greensock-logo.svg" alt="GreenSock superhero logo">
    </div>

    <div class="mt-12 flex justify-center items-center gap-x-10">

        <img class="logo h-32" src="/images/greensock-logo.svg" alt="GreenSock superhero logo">

        <div class="circle h-10 w-10 rounded-full bg-blue-500"></div>
        <div class="circle h-10 w-10 rounded-full bg-red-400"></div>
        <div class="circle h-10 w-10 rounded-full bg-red-500"></div>
        <div class="circle h-10 w-10 rounded-full bg-purple-500"></div>
        <div class="circle h-10 w-10 rounded-full bg-green-300"></div>

    </div>

    <div class="mt-24 flex justify-center">
        <button id="play" class="text-gray-200 bg-gray-800 px-2 py-1">play()</button>
        <button id="pause" class="text-gray-200 bg-gray-800 px-2 py-1">pause()</button>
        <button id="seek" class="text-gray-200 bg-gray-800 px-2 py-1">seek(2)</button>
        <button id="progress" class="text-gray-200 bg-gray-800 px-2 py-1">progress(0.2)</button>
        <button id="reverse" class="text-gray-200 bg-gray-800 px-2 py-1">reverse()</button>
        <button id="time4" class="text-gray-200 bg-gray-800 px-2 py-1">timeScale(4)</button>
        <button id="time2" class="text-gray-200 bg-gray-800 px-2 py-1">timeScale(0.2)</button>
        <button id="restart" class="text-gray-200 bg-gray-800 px-2 py-1">restart()</button>
    </div>

</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js"></script>

<!-- Any scripts using GSAP here -->
<script>
    // Animate from
    gsap.from(".logo", {
        duration: 1.5,
        opacity: 0,
        scale: 0.3,
        ease: "back"
    });
    var tween = gsap.from(".circle", {
        duration: 1.5,
        delay: 1.5,
        opacity: 0,
        y: "random(-200, 200)",
        stagger: 0.25
    });
    document.querySelector("#play").onclick = () => tween.play();
    document.querySelector("#pause").onclick = () => tween.pause();
    document.querySelector("#seek").onclick = () => tween.seek(2);
    document.querySelector("#progress").onclick = () => tween.progress(0.2);
    document.querySelector("#reverse").onclick = () => tween.reverse();
    document.querySelector("#time4").onclick = () => tween.timeScale(4);
    document.querySelector("#time2").onclick = () => tween.timeScale(0.2);
    document.querySelector("#restart").onclick = () => tween.restart();
    // gsap.to(".logo", {
    //   duration: 2,
    //   x: 300,
    //   backgroundColor: "#993cca",
    //   borderRadius: "20%",
    //   border: "5px solid white",
    //   ease: "bounce"
    // });
    // // Set initial properties for 2 elements
    // gsap.set(".logo, .logo2", {
    //   transformOrigin: "50% 50%"
    // });
    //
    // // animate to
    // gsap.to(".logo, .logo2", {
    //   duration: 2,
    //   rotation: 360
    // })
    //
    // // animate an Object
    // var myObject = {rotation: 0};
    // gsap.to(myObject, {
    //   duration: 2,
    //   rotation: 360,
    //   onUpdate: function() {
    //     console.log(myObject.rotation);
    //   }
    // })
</script>