<img id="logo" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/logo-man.svg" />

<div class="nav">
  <button id="bounce">bounce</button>
  <button id="linear">linear</button>
  <button id="elastic">elastic</button>
  <button id="circ">circ</button>
  <button id="expo">expo</button>
</div>

@import url("https://fonts.googleapis.com/css?family=Gochi+Hand");

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  width: 100vw;
  min-height: 100vh;
  margin: 0;
  background-color: #291642;
  font-family: "Gochi Hand", sans-serif;
  font-size: 100%;
  letter-spacing: 0.1rem;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.box {
  margin: auto 10px;
}

button {
  text-transform: none;
  margin: 5px;
}

.nav {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: auto;
}

document.querySelector("#bounce").addEventListener("click", () => {
  gsap.to("#logo", { duration: 1, y: 100, scale: 0.5, ease: "bounce" });
});
document.querySelector("#linear").addEventListener("click", () => {
  gsap.to("#logo", { duration: 1, x: 100, scale: 0.8, ease: "linear" });
});
document.querySelector("#elastic").addEventListener("click", () => {
  gsap.to("#logo", {
    duration: 1,
    y: 100,
    x: 30,
    scale: 0.5,
    ease: "elastic.out(1, 0.3)"
  });
});
document.querySelector("#circ").addEventListener("click", () => {
  gsap.to("#logo", { duration: 1, y: 100, scale: 1.2, ease: "circ.out" });
});
document.querySelector("#expo").addEventListener("click", () => {
  gsap.to("#logo", {
    duration: 1,
    y: 100,
    x: 100,
    scale: 0.5,
    ease: "expo.out"
  });
});