<h2 class="mobile">Make screen wider</h2>
<h2 class="desktop">Make screen smaller</h2>
<div class="box green">300px</div>
<div class="container">
  <div class="box guide"></div>
  <div class="box purple">200%</div>
</div>

<div class="box blue">100vw</div>

<div class="buttonCont">
  <button>Play animation</button>
</div>

body {
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
  min-height: 100vh;
  flex-direction: column;
}
.container {
  position: relative;
  height: 100px;
}

.guide {
  background-color: transparent;
  border: dashed 1.5px white;
  padding: 1px;
  top: -1.5px;
  width: 300px;
}

h2 {
  width: 100%;
  text-align: center;
}

.desktop {
  display: none;
}

.mobile {
  display: block;
}

@media (min-width: 800px) {
  .purple {
    width: 250px;
  }

  .guide {
    width: 750px;
  }

  .desktop {
    display: block;
  }

  .mobile {
    display: none;
  }
}

.container .box {
  position: absolute;
}

.buttonCont {
  width: 100%;
  display: flex;
  justify-content: center;
}

gsap.defaults({
  ease: "power2.out", 
  duration: 2,
  ease: 'power2.inOut'
});

let tl = gsap.timeline({
  yoyo: true,
  repeat: -1,
  paused: true,
})

// animate by a specific number of pixels
tl.to('.green', {
  x: 300,
},0)

// animate based on a percentage of the width of the element itself - (200 is twice the width. aka 200%)
tl.to('.purple', {
  xPercent: 200,
},0)

// animate using viewport widths, with an offset of the elements width to prevent it overshooting
tl.to('.blue', {
  x: '100vw',
  xPercent: -100,
},0)


let button = document.querySelector('button');

button.addEventListener('click', (e) => {
  tl.paused( !tl.paused() )
  
  button.innerText = !tl.paused() ? 'Pause Animation' : 'Play Animation'
})