<main>
  <div class="content">
    <h3>duration</h3>
    <pre>gsap.to(".box", {x: 200, duration: 5})</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_duration" class="box"></div>
    </div>
  </div>
  
  <div class="content">
    <h3>delay</h3>
    <pre>gsap.to(".box", {x: 200, delay: 2})</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_delay" class="box"></div>
    </div>
  </div>
  
  <div class="content">
    <h3>repeat</h3>
    <pre>gsap.to(".box", {x: 200, repeat: -1})</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_repeat" class="box"></div>
    </div>
  </div>
  
 
  <div class="content">
    <h3>repeat</h3>
    <pre>gsap.to(".box", {x: 200, repeat: -1, yoyo: true})</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_yoyo" 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

// duration
gsap.to("#box_duration", { x: defaultDistance, duration: 5 })

// delay
gsap.to("#box_delay", { x: defaultDistance, duration: defaultDuration, delay: 2 })

// repeat
gsap.to("#box_repeat", { x: defaultDistance, duration: defaultDuration, repeat: -1 })

// yoyo
gsap.to("#box_yoyo", { x: defaultDistance, duration: defaultDuration, repeat: -1, yoyo: true })