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

edited November 2022 in HTML

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>

JS Code :

var tween =".box2", {
  duration: 4,
  x: '100vw', 
  rotation: 360, 
  ease: "none",
  paused: true

// click handlers for controlling the tween instance...
document.querySelector("#play").onclick = () =>;
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
    edited November 2022

    You can animate an HTML element with a class of "box" by adding a single change in gsap code in your JS Code:".box", { xPercent: -200 });

  • Avi
    edited November 2022

    @Vanshika thanks for the solution

Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!