Sometimes, we want to make an element slide right to left with JavaScript.
In this article, we’ll look at how to make an element slide right to left with JavaScript.
How to make an element slide right to left with JavaScript?
To make an element slide right to left with JavaScript, we use the TweenLite library.
We add the scripts for the library with
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/plugins/CSSPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/easing/EasePack.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenLite.min.js"></script>
Then we use it by writing
const myObj = document.getElementById("myDiv");
TweenLite.to(myObj, 0.7, { x: 500, ease: Power3.easeOut });
to select the div with getElementById.
Then we call TweenLite.to with the myObj element, speed, and an object with the x distance and `ease easing to animate the div with the sliding effect.
It’ll slide 500px right since x is 500.
Conclusion
To make an element slide right to left with JavaScript, we use the TweenLite library.
