<main>
  <div class="content">
    <h3>none</h3>
    <pre>gsap.to(".box", { x: 200, ease: 'none' })</pre>
    <div class="area">
      <div class="area_reference area_reference-left">x: -200</div>
      <div class="area_reference">x: 0</div>
      <div class="area_reference area_reference-right">x: 200</div>
      <div id="box_ease_none" class="box"></div>
    </div>
  </div>
  
  <div class="content">
    <h3>power1(default)</h3>
    <pre>gsap.to(".box", { x: 200, ease: 'power1.out' })</pre>
    <div class="area">
      <div class="area_reference area_reference-left">x: -200</div>
      <div class="area_reference">x: 0</div>
      <div class="area_reference area_reference-right">x: 200</div>
      <div id="box_ease_power1" class="box"></div>
    </div>
  </div>
  
  <div class="content">
    <h3>back</h3>
    <pre>gsap.to(".box", { x: 200, ease: 'back.out' })</pre>
    <div class="area">
      <div class="area_reference area_reference-left">x: -200</div>
      <div class="area_reference">x: 0</div>
      <div class="area_reference area_reference-right">x: 200</div>
      <div id="box_ease_back" class="box"></div>
    </div>
  </div>
  
  <div class="content">
    <h3>bounce</h3>
    <pre>gsap.to(".box", { x: 200, ease: 'bounce.out' })</pre>
    <div class="area">
      <div class="area_reference area_reference-left">x: -200</div>
      <div class="area_reference">x: 0</div>
      <div class="area_reference area_reference-right">x: 200</div>
      <div id="box_ease_bounce" class="box"></div>
    </div>
  </div>
</main>

$black: #272727;
$gray: #aaaaaa;
$white: #ffffff;
$yellow: #ffd700;

* {
  box-sizing: border-box;  
}
body {
  padding: 16px;
  overflow-x: hidden;
  background: $black;
  color: $white;
}
main {
  width: 100%;
  max-width: 1000px;
  margin-inline: auto;
}
h3 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 20px;
  width: 100%;
}
pre {
  width: 100%;
  font-size: 12px;
  line-height: 150%;
  padding: 8px 12px;
  margin-bottom: 16px;
  background: #2e2a17;
  border-radius: 4px;
  border: 1px solid rgba($white, 0.2);
  white-space: break-spaces;
}
.content {
  display: flex;
  flex-direction: column;
  align-items: center;

  &:not(:last-of-type) {
    margin-bottom: 40px;
  }
}
.area {
  display: flex;
  justify-content: center;
  position: relative;
  width: 100%;
}
.area_reference {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 12px;
  bottom: -20px;
  color: $gray;
  height: calc(100% + 20px);
  &::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 100%;
    border-right: 2px dotted $gray;
    margin-bottom: 8px;
  }
  
  &-left {
    transform: translateX(-200px);
  }
  &-right {
    transform: translateX(200px);
  }
}
.box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  border-radius: 10px;
  color: $black; 
  background: $yellow;
  z-index: 1;
  
  &:not(:last-of-type) {
    margin-bottom: 8px;
  }
}

const defaultDistance = 200
const defaultDuration = 1

// none
gsap.to("#box_ease_none", { x: defaultDistance, duration: defaultDuration, ease: 'none' })

// power1
gsap.to("#box_ease_power1", { x: defaultDistance, duration: defaultDuration, ease: 'power1.out' })

// back
gsap.to("#box_ease_back", { x: defaultDistance, duration: defaultDuration, ease: 'back.out' })

// bounce
gsap.to("#box_ease_bounce", { x: defaultDistance, duration: defaultDuration, ease: 'bounce.out' })