How to add some reveal animations to your elements

Two years ago, I wrote a tutorial about how to add some reveal animations with Oxygen.
It was quite basic, so later I've made another version only available in my design set.

This new version still works with AOS, so it's still the same method, but I have added some features and made it easier to use.

Divs everywhere

Just like the old method, we add our elements (a text, an image, an icon...) and wrap them in a Div. We will then only take care of the Divs.

CSS forever

Copy and paste the full CSS (located at the bottom of this page), to a new stylesheet, or a Code Block.

Adding the reveal effect

We simply have to add one of these classes to the Divs:

.aos-reveal-ltr (left to right reveal effect)
.aos-reveal-rtl (right to left reveal effect)
.aos-reveal-ttb (top to bottom reveal effect)
.aos-reveal-btt (bottom to top reveal effect)

Enabling AOS

Don't forget that it will only works with AOS. Because we need to trigger the effect when the Divs come into view.
Select the Div (choose his ID, or better, the class, so we don't have to do it for each element) and enable the Animate On Scroll animation.
Choose Fade as the animation and that's it. Don't change any other settings :

Right now, it should already work!

Default settings

The default settings are right at the beginning of the CSS:

.aos-reveal-ltr,
.aos-reveal-rtl,
.aos-reveal-ttb,
.aos-reveal-btt {
  
  	/* default settings */
    --aos-reveal-speed: 1s;
    --aos-reveal-colorstart: #28C39B;
    --aos-reveal-colorend: #a186cc;
    --aos-reveal-delay: 0s;
    --aos-reveal-entrance: aos-reveal-none;
  	/* end of default settings */

    position: relative;
    overflow: hidden;
}

They are CSS variables so we can easily modify them:

--aos-reveal-speed : the duration of the animation. Ex: 1s , 0.5s , 300ms

--aos-reveal-colorstart : the starting color. Ex. black, #000

--aos-reveal-colorend : the ending color

--aos-reveal-delay : The delay before the animation starts.

--aos-reveal-entrance : The content can be animated too with one of these ready-made animations:

aos-reveal-none , aos-reveal-fade , aos-reveal-slideleft , aos-reveal-slideright , aos-reveal-slideup , aos-reveal-slidedown , aos-reveal-zoomin , aos-reveal-zoomout

Individual settings

The default settings mean that all our elements will have the same animation, speed, delay and colors. If we want to change them individually, we just have to use the same variables.

Select the Div, be sure to select his ID and in the custom CSS, we add the variables we want to modify:

Example with these 3 images:

For the first one, we keep the default settings but we make it faster:

--aos-reveal-speed: 0.6s;

The second one has the default speed but with a delay and different colors and effect:

--aos-reveal-delay: 0.5s;
--aos-reveal-colorstart: white;
--aos-reveal-colorend: #FF5252;
--aos-reveal-entrance: aos-reveal-fade;

Same for the last one:

--aos-reveal-delay: 1s;
--aos-reveal-colorstart: black;
--aos-reveal-colorend: #FAC602;
--aos-reveal-entrance: aos-reveal-slideup;

The full CSS to copy

/* 

CSS Reveal Animations with AOS
by Michael Thomas aka SUPAMIKE

*/
.aos-reveal-ltr,
.aos-reveal-rtl,
.aos-reveal-ttb,
.aos-reveal-btt {
  
  	/* default settings */
    --aos-reveal-speed: 1s;
    --aos-reveal-colorstart: #28C39B;
    --aos-reveal-colorend: #a186cc;
    --aos-reveal-delay: 0s;
    --aos-reveal-entrance: aos-reveal-none;
  	/* end of default settings */

    position: relative;
    overflow: hidden;
}

.aos-reveal-ltr[data-aos=fade].aos-animate>*,
.aos-reveal-rtl[data-aos=fade].aos-animate>*,
.aos-reveal-ttb[data-aos=fade].aos-animate>*,
.aos-reveal-btt[data-aos=fade].aos-animate>* {
    animation: var(--aos-reveal-entrance) calc(var(--aos-reveal-speed) * 1) calc(var(--aos-reveal-speed) + var(--aos-reveal-delay));
    animation-fill-mode: forwards;
    opacity: 0;
}

.aos-reveal-ltr[data-aos=fade].aos-animate::after {
    position: absolute;
    content: '';
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: translateX(-101%);
    animation: aos-revealin-ltr var(--aos-reveal-speed) var(--aos-reveal-delay), aos-revealout-ltr var(--aos-reveal-speed) calc(var(--aos-reveal-speed) + var(--aos-reveal-delay));
    animation-fill-mode: forwards;
}

.aos-reveal-rtl[data-aos=fade].aos-animate::after {
    position: absolute;
    content: '';
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: translateX(-101%);
    animation: aos-revealin-rtl var(--aos-reveal-speed) var(--aos-reveal-delay), aos-revealout-rtl var(--aos-reveal-speed) calc(var(--aos-reveal-speed) + var(--aos-reveal-delay));
    animation-fill-mode: forwards;
}

.aos-reveal-ttb[data-aos=fade].aos-animate::after {
    position: absolute;
    content: '';
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: translateY(-101%);
    animation: aos-revealin-ttb var(--aos-reveal-speed) var(--aos-reveal-delay), aos-revealout-ttb var(--aos-reveal-speed) calc(var(--aos-reveal-speed) + var(--aos-reveal-delay));
    animation-fill-mode: forwards;
}

.aos-reveal-btt[data-aos=fade].aos-animate::after {
    position: absolute;
    content: '';
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: translateY(101%);
    animation: aos-revealin-btt var(--aos-reveal-speed) var(--aos-reveal-delay), aos-revealout-btt var(--aos-reveal-speed) calc(var(--aos-reveal-speed) + var(--aos-reveal-delay));
    animation-fill-mode: forwards;
}

@keyframes aos-reveal-none {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

@keyframes aos-reveal-fade {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes aos-reveal-slideleft {
    0% {
        opacity: 1;
        transform: translatex(100px);
    }

    100% {
        opacity: 1;
        transform: translatex(0px);
    }
}

@keyframes aos-reveal-slideright {
    0% {
        opacity: 1;
        transform: translatex(-100px);
    }

    100% {
        opacity: 1;
        transform: translatex(0px);
    }
}

@keyframes aos-reveal-slideup {
    0% {
        opacity: 1;
        transform: translatey(100px);
    }

    100% {
        opacity: 1;
        transform: translatey(0px);
    }
}

@keyframes aos-reveal-slidedown {
    0% {
        opacity: 1;
        transform: translatey(-100px);
    }

    100% {
        opacity: 1;
        transform: translatey(0px);
    }
}

@keyframes aos-reveal-zoomin {
    0% {
        opacity: 1;
        transform: scale(0);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes aos-reveal-zoomout {
    0% {
        opacity: 1;
        transform: scale(2);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes aos-revealin-ltr {
    0% {
        transform: translateX(-101%);
        background-color: var(--aos-reveal-colorstart);
    }

    100% {
        transform: translateX(0);
        background-color: var(--aos-reveal-colorend);
    }
}

@keyframes aos-revealout-ltr {
    0% {
        transform: translateX(0);
        background-color: var(--aos-reveal-colorend);
    }

    100% {
        transform: translateX(101%);
        background-color: var(--aos-reveal-colorstart);
    }
}

@keyframes aos-revealin-rtl {
    0% {
        transform: translateX(101%);
        background-color: var(--aos-reveal-colorstart);
    }

    100% {
        transform: translateX(0);
        background-color: var(--aos-reveal-colorend);
    }
}

@keyframes aos-revealout-rtl {
    0% {
        transform: translateX(0);
        background-color: var(--aos-reveal-colorend);
    }

    100% {
        transform: translateX(-101%);
        background-color: var(--aos-reveal-colorstart);
    }
}

@keyframes aos-revealin-ttb {
    0% {
        transform: translateY(-101%);
        background-color: var(--aos-reveal-colorstart);
    }

    100% {
        transform: translateY(0);
        background-color: var(--aos-reveal-colorend);
    }
}

@keyframes aos-revealout-ttb {
    0% {
        transform: translateY(0);
        background-color: var(--aos-reveal-colorend);
    }

    100% {
        transform: translateY(101%);
        background-color: var(--aos-reveal-colorstart);
    }
}

@keyframes aos-revealin-btt {
    0% {
        transform: translateY(101%);
        background-color: var(--aos-reveal-colorstart);
    }

    100% {
        transform: translateY(0);
        background-color: var(--aos-reveal-colorend);
    }
}

@keyframes aos-revealout-btt {
    0% {
        transform: translateY(0);
        background-color: var(--aos-reveal-colorend);
    }

    100% {
        transform: translateY(-101%);
        background-color: var(--aos-reveal-colorstart);
    }
}