So we have the basic Left to right animation. Let’s duplicate some of the classes to create more animations:

.revealLTR, .revealRTL, .revealTTB, .revealBTT

Which are: reveal Left-To-Right , reveal Right-To-Left , reveal Top-To-Bottom , reveal Botton-To-Top.

So we can have a little bit more fun:

Animate On Scroll

In Oxygen, we have the AOS library, aka Animation On Scroll.

Let’s take advantage of it so the reveal effects will start only when they enter the viewport.

I have already made an article to explain how to customize the scroll animation effects . We are going to use the same technique.

But before I show the full CSS, here is a short tutorial to explain how to use it:

Step 1

Add a DIV and assign one of these class to it : .revealLTR, .revealRTL, .revealTTB, or .revealBTT

Step 2

Go to Advanced / Effects / Animate On Scroll and enable the Animation. Choose the Fade effect.

DON’T CHOOSE another Animation Type. To make it simpler, it only works with the Fade effect.

Step 3

Inside the Div, add a Text element, or an Image, because it also works great with images 🙂

The full CSS

Here is now the full CSS that you can copy & paste in the Code Block or in a Stylesheet:

Note that if you want to change the color of the block, you just have to modify the background property.

.revealLTR,
.revealRTL,
.revealTTB,
.revealBTT {
position: relative;
overflow: hidden;
}
.revealLTR[data-aos=fade].aos-animate > *,
.revealRTL[data-aos=fade].aos-animate > *,
.revealTTB[data-aos=fade].aos-animate > *,
.revealBTT[data-aos=fade].aos-animate > * {
animation: fadeIn 0s 0.6s;
animation-fill-mode: backwards;
}
.revealLTR[data-aos=fade]:not[.aos-animate],
.revealRTL[data-aos=fade]:not[.aos-animate],
.revealTTB[data-aos=fade]:not[.aos-animate],
.revealBTT[data-aos=fade]:not[.aos-animate] {
opacity: 0;
}
.revealLTR[data-aos=fade].aos-animate::after {
position: absolute;
content: '';
left: 0;
top: 0;
width: 100%;
height: 100%;
background: white;
transform: translateX(-100%);
animation: revealInLTR 0.6s 0s, revealOutLTR 0.6s 0.6s;
animation-fill-mode: forwards;
}
.revealRTL[data-aos=fade].aos-animate::after {
position: absolute;
content: '';
left: 0;
top: 0;
width: 100%;
height: 100%;
background: white;
transform: translateX(100%);
animation: revealInRTL 0.6s 0s, revealOutRTL 0.6s 0.6s;
animation-fill-mode: forwards;
}
.revealTTB[data-aos=fade].aos-animate::after {
position: absolute;
content: '';
left: 0;
top: 0;
width: 100%;
height: 100%;
background: white;
transform: translateY(-100%);
animation: revealInTTB 0.6s 0s, revealOutTTB 0.6s 0.6s;
animation-fill-mode: forwards;
}
.revealBTT[data-aos=fade].aos-animate::after {
position: absolute;
content: '';
left: 0;
top: 0;
width: 100%;
height: 100%;
background: white;
transform: translateY(100%);
animation: revealInBTT 0.6s 0s, revealOutBTT 0.6s 0.6s;
animation-fill-mode: forwards;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes revealInLTR {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}
@keyframes revealOutLTR {
0% {
transform: translateX(0);
}
100% {
transform: translateX(101%);
}
}
@keyframes revealInRTL {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(0);
}
}
@keyframes revealOutRTL {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-101%);
}
}
@keyframes revealInTTB {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(0);
}
}
@keyframes revealOutTTB {
0% {
transform: translateY(0);
}
100% {
transform: translateY(101%);
}
}
@keyframes revealInBTT {
0% {
transform: translateY(100%);
}
100% {
transform: translateY(0);
}
}
@keyframes revealOutBTT {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-101%);
}
}

Check this page for more examples:

https://oxygen4fun.supadezign.com/reveal-animations/