Creating Reveal Effects on Scroll
Tags: css, javascript, animation, webdev
Published: 2019-02-26 23:57:14

---
title: Creating Reveal Effects on Scroll
published: true
description: 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.
tags: css, javascript, animation, webdev
---

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:

![Slider](
https://thepracticaldev.s3.amazonaws.com/i/viwjnn7xxxjwcr0622mh.gif)
View it on [CodePen](https://codepen.io/kathykato/pen/MqYVOq).

I will be showing you how to create this effect with CSS and [Animate on Scroll (AOS)](https://michalsnik.github.io/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:
```html
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
```

And aos.js before the closing `<body>` tag:
```html
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
```

Once added, initialize AOS:
```javascript
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](https://doggoipsum.com/), a lorem ipsum generator from doggo lingo.

```html
<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:

```css
.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:

![Line](https://thepracticaldev.s3.amazonaws.com/i/slfth2p9wq0wdf50xtus.png)
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:
```html
<div class="reveal-block" data-aos="reveal-right"></div>
```
And CSS:
```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: 
```javascript
AOS.init({
  once: true
});
```

The animations will now play once on scroll! Here is how it should look so far:
![Reveal block effect](https://thepracticaldev.s3.amazonaws.com/i/hldvndy5gvzlyhnh00s3.gif)

To add this same effect to images, it is a similar process. Replace the text with an image in HTML:
```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%:
```css
[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:
```css
.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:
```html
<div class="reveal-block right" data-aos="reveal-right"></div>
```

This will help when with animating with pseudo-elements. The CSS being:
```css
.reveal-block.right::before {
  transform: scaleX(0);
  transform-origin: 0% 100%;
}

.reveal-block.right.aos-animate::before {
  transform: scaleX(1);
}
```
This is the result:
![Reveal block effect](https://thepracticaldev.s3.amazonaws.com/i/h5ej2exro7gvds0v1gq0.gif)

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:
```html
<div class="reveal-holder" data-aos="reveal-item">...</div>
```

And the accompanying CSS:
```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.

A live demo is available on [CodePen](https://codepen.io/kathykato/pen/PLwBez). I also created a [GitHub repository](https://github.com/kathykato/reveal-effects) with the code. Happy coding!