How to set 100vw width for the animation of an axis in GSAP animation
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 AnnimationComments
-
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 });
Howdy, Stranger!