How to make an element slide right to left with JavaScript?

Spread the love

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.

Leave a Reply

Your email address will not be published. Required fields are marked *