<p class="text">Fine-tune your easing with ease and easeEach</p>
<section>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150">
    <rect opacity="0.5" stroke-width="0.3" x="25" y="25" width="100" height="100" fill="none" stroke="#fff" stroke-miterlimit="5" stroke-dasharray="5" />
    <circle cx="25" cy="25" r="2" fill="#d5d5d5"/>
    <circle cx="125" cy="25" r="2" fill="#d5d5d5"/>
    <circle cx="125" cy="125" r="2" fill="#d5d5d5"/>
    <circle cx="25" cy="125" r="2" fill="#d5d5d5"/>
    <rect class="elem" x="10" y="10" width="30" height="30" rx="4" fill="#0ae448" />
    
  </svg>

  <form>
    <div class="pretty p-default p-curve">
      <input type="radio" name="eases" id="ease" value="ease" checked>
      <div class="state">
        <label for="ease">ease</label>
      </div>
    </div>

    <div class="pretty p-default p-curve">
      <input type="radio" name="eases" id="each" value="each">
      <div class="state">
        <label for="each">easeEach</label>
      </div>
    </div>
  </form>

</section>

.pretty.p-default input:checked~.state label:after {
    background-color: #0ae448!important;
}

body {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  padding: 0 1rem;
}

form {
  display: flex;
  flex-direction: column;
}

form > * + * {
  margin-top: 1rem;
}

section {
  display: flex;
  width: 100%;
  max-width: 500px;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
}

svg {
  min-width: 200px;
  width: 70%;
}

let eachTween = gsap.to(".elem", {
  keyframes: {
    x: [0, 100, 100, 0, 0],
    y: [0, 0, 100, 100, 0],
    easeEach: "power4.inOut" // <- customise the ease between each keyframe
  },
  duration: 5,
  paused: true,
});

let easeTween = gsap.to(".elem", {
  keyframes: {
    x: [0, 100, 100, 0, 0],
    y: [0, 0, 100, 100, 0],
    easeEach: 'none' // <- override the default keyframe ease
  },
  ease: "power4.inOut", // <- apply an ease to all the keyframes
  duration: 5,
  paused: true,
});

easeTween.play()


let form = document.querySelector("form");
let text = document.querySelector(".text");

form.addEventListener("change", (e) => {
  let value = document.querySelector("input:checked").value;

  if (value === "ease") {
    eachTween.kill()
    easeTween.play(0)
    text.textContent = "ease the whole keyframe"
  } else {
    easeTween.kill()
    eachTween.play(0)
    text.textContent = "ease between keyframes"
  }
});