Creating Reveal Effects on Scroll

Katherine Kato — Tue, 26 Feb 2019 23:57:14 +0000

In this tutorial I would like to share on how to create block reveal effects on scroll. The effect consists of solid colored block decreasing in size and revealing text or an image.

These reveal effects can be used to create engaging and fresh interactions for UI components such as image sliders. I created this slider using a similar wipe animation:

View it on CodePen.

I will be showing you how to create this effect with CSS and Animate on Scroll (AOS), a JavaScript library for animating elements on scroll as a user enters the viewport.

Getting started

Let’s begin by adding the Animate on Scroll library to the project. Include the aos.css in <head> tag:

<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">

And aos.js before the closing <body> tag:

<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

Once added, initialize AOS:

AOS.init();

Creating the reveal block

First we will create the reveal block for revealing text underneath. We will be grabbing text from Doggo Ipsum, a lorem ipsum generator from doggo lingo.

<div class="reveal-holder">
  <div class="reveal-block"></div>
  <h1 class="heading">Maximum borkdrive</h1>
</div>

The .reveal-holder class is a container for the solid color block element and text. The styling for these classes are:

.reveal-holder {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.reveal-block {
  position: absolute;
  top: 0;
  width: 100%;
  height: 101%;
  background: white;
}

This is for the block to cover and reveal an element properly. Having the height of the .reveal-block class to 101% is important here:

Setting the height to 100% results in the reveal block not completely over images after window resizing. Having the overflow CSS property set to hidden for the .reveal-holder class helps prevent anything outside the element's content from clipping.

Using CSS transitions

Animations are set using the data-aos attribute. For example, to reveal an element from the right, add the attribute to the .reveal-block class in the HTML:

<div class="reveal-block" data-aos="reveal-right"></div>

And CSS:

[data-aos="reveal-right"] {
  transform: scaleX(1);
  transform-origin: 100% 0%;
  transition-property: transform;
  transition-delay: 0.5s;
}

[data-aos="reveal-right"].aos-animate {
  transform: scaleX(0);
}

The transform CSS property is using the scaleX() function to the .reveal-block element in order for the block to resize when animated. The transform-origin property sets the point of the transformation, which in this case is at 100% 0% or right left. This is what causes the block to animate by decreasing in size. The transition-property sets the transition effect to be applied and transition-delay sets the transition to wait based on the value set.

Add these options to the AOS.init() function to make the animation play once:

AOS.init({
  once: true
});

The animations will now play once on scroll! Here is how it should look so far:

To add this same effect to images, it is a similar process. Replace the text with an image in HTML:

<div class="reveal-holder">
  <div class="reveal-block" data-aos="reveal-left"></div>
  <img src="pomeranian.jpg" alt="Pomeranian">
</div>

To make the reveal effect slide to the left from the right, edit the transform-origin to 0% 100%:

[data-aos="reveal-left"] {
  ...
  transform-origin: 0% 100%;
  ...
}

Animating pseudo-elements

We will be using pseudo-elements to the .reveal-block class to create a more stylish reveal animation.

Start by modifying the CSS for the .reveal-block class:

.reveal-block {
  position: absolute;
  top: 0;
  width: 100%;
  height: 101%;
  background: white;
}

.reveal-block::before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: lightgray;
  transition-property: transform;
  transition-duration: 0.5s;
}

The ::before pseudo-element is its own element, acting like another .reveal-block but can be set with its own properties, such as background color or positioning.

Add a .right class to .reveal-block like so:

<div class="reveal-block right" data-aos="reveal-right"></div>

This will help when with animating with pseudo-elements. The CSS being:

.reveal-block.right::before {
  transform: scaleX(0);
  transform-origin: 0% 100%;
}

.reveal-block.right.aos-animate::before {
  transform: scaleX(1);
}

This is the result:

Looks great! All that is left is to hide elements from appearing before scroll. To do this, we will add an data-aos attribute to the .reveal-holder class:

<div class="reveal-holder" data-aos="reveal-item">...</div>

And the accompanying CSS:

[data-aos="reveal-item"] {
  visibility: hidden;
  transition-property: visibility;
  transition-duration: 0s;
}

[data-aos="reveal-item"].aos-animate {
  visibility: visible;
}

Wrapping up

Scroll-triggered animations such as block reveal effects can be an immersive and elegant interaction to reveal content. I hope this tutorial helped you learn not only how these animations are done, but also understanding what is exactly happening to make this animation work.