How to set 100vw width for the animation of an axis in GSAP animation

Avi

I want to make a animation of a div which is 200px width and i wanna animate it for 100vw
My code is given Below and it's works but the animation will be stopped after the 200px of 100vw width :

HTML Code :

<div class="boxes2">
      <div class="box2"></div>
       <div class="nav">
        <button id="play">play</button>
       <button id="pause">pause</button>
       <button id="resume">resume</button>
       <button id="reverse">reverse</button>
       <button id="restart">restart</button>
      </div>
</div>

JS Code :

var tween = gsap.to(".box2", {
  duration: 4,
  x: '100vw', 
  rotation: 360, 
  ease: "none",
  paused: true
});

// click handlers for controlling the tween instance...
document.querySelector("#play").onclick = () => tween.play();
document.querySelector("#pause").onclick = () => tween.pause();
document.querySelector("#resume").onclick = () => tween.resume();
document.querySelector("#reverse").onclick = () => tween.reverse();
document.querySelector("#restart").onclick = () => tween.restart();

Here is my Preview :

See the Pen GSAP Annimation

Vanshika

You can animate an HTML element with a class of "box" by adding a single change in gsap code in your JS Code:

gsap.to(".box", { xPercent: -200 });

Avi

@Vanshika thanks for the solution