A unique collection of Design Sets for Oxygen Builder

DESIGN SETS FOR OXYGEN

MADE WITH BY SUPADEZIGN

Feel free to donate if you like my tutorials ;)

Block reveal animations

BLOCK REVEAL
A NICE CSS EFFECT
FOR OXYGEN BUILDER

Finally a CSS only effect. No Javascript, no external files, just some good old CSS.

First, here is the basic CSS for this effect.
Don't copy this CSS yet, we are going to enhance it and give it more power ;)
Only copy the full CSS at the end of this page.

 

.reveal {
	position: relative;
	overflow: hidden;
}
.reveal > * {
	animation: fadeIn 0s 0.6s;
	animation-fill-mode: backwards;
}
.reveal::after {
	position: absolute;
	content: '';
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: #fff;
	transform: translateX(-100%);
	animation: revealIn 0.6s 0s, revealOut 0.6s 0.6s;
	animation-fill-mode: forwards;
}
@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes revealIn {
	0% {
		transform: translateX(-100%);
	}
	100% {
		transform: translateX(0);
	}
}
@keyframes revealOut {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(101%);
	}
}

More effects

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:

Left to right
RIGHT TO LEFT
TOP TO BOTTOM
BOTTOM TO TOP

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 :)

 

THIS IS AWESOME

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/