Animate and slide in HTML elements from any direction in CSS and Javascript

Blog Problem Solving Tutorial

How to animate HTML elements and slide them in on mouse scroll using CSS and Javascript

How to animate HTML elements and slide them in on mouse scroll using CSS and Javascript

Today I want to animate a bunch of HTML elements and create an animation that moves them inside the same parent DIV once the elements are in the viewport, so only when the elements are visible to the users.

To do this, first of all, I need some CSS classes, one that sets the elements’ opacity to zero (this class is called “‘js-animate-element“), so the elements are not going to be visible at first, then 4 different CSS classes that move the elements to the initial positions, which could be top/bottom/left/right, these classes are called “bottom-animation, top-animation etc…”, and another CSS class that move the elements to the initial position, which is called “insight“. In order to set the initial element position I will use the CSS attribute “transform: translateY(—px);

Here is the CSS code that I need:

.js-animate-element {
    opacity: 0;

        transform: translateY(150px);

        transform: translateY(-150px);

        transform: translateX(150px);

        transform: translateX(-150px);

    &.insight {
        transform: translateY(0) translateX(0);
        opacity: 1;
        transition: 1s all ease;

Now I want to put my HTML elements inside the same parent that I will call “js-animate-wrapper“. When the user scrolls the page I will constantly check if one of the parent elements called “js-animate-wrapper” is in the viewport or if it enters in viewport. So I will use the Javascript listener event called “window.addEventListener(“scroll”, function)“, here is the documentation.

If one of the parents is in the viewport, I will check if the parent has children elements called “js-animate-element”, if so, I will loop through them with a forEach loop and I will apply the CSS class “insight” to them in order to bring the elements back to the initial position. But because I want to do that with one single element at a time, I will run a “setTimeout” function inside the forEach loop that will wait 500 milliseconds before running the next element.

And here is the JS code of the tutorial:

(function () {

    function reveal() {
        var wrapper = document.querySelectorAll(".js-animate-wrapper");

        wrapper.forEach(function (parent, index) {
            var windowHeight = window.innerHeight;
            var elementTop = parent.getBoundingClientRect().top;
            var elementVisible = 150;

            if (elementTop < windowHeight - elementVisible) {
                var reveals = parent.querySelectorAll(".js-animate-element");

                reveals.forEach(function (ele, index) {
                    setTimeout(function () {
                    }, index * 500);

    window.addEventListener("scroll", reveal);


I have created this codePen script with the whole tutorial in it and a funny demo to watch, please have a look at this link in codePen. And if you have enjoyed this tutorial leave a comment below and tell me what you think about it.

Click to Leave a Comment

You May Like

This tutorial will show you how to change your website cursor to any CSS shape and change the shape on hover on certain HTML elements. I have seen a lot of tutorials online about changing the HTML cursor to an SVG icon or to a PGN icon. In my case, I would like to change […]

October 15, 2022

Woocommerce Min Max Checkout is a plugin that extends your Woocommerce e-commerce in order to give you the possibility to set the minimum or maximum checkout amount or in order to set a minimum or maximum order quantity on the cart or checkout pages. With Woocommerce Min Max Checkout you can also set e customizable […]

February 12, 2022

How to add Read More/Read Less button next to a too long HTML element. This tutorial will take you through how to display a certain number of rows of an HTML element and hide the rest of it, then we will see how to read a clickable “Read More” element at the end of the […]

January 15, 2022