Reveal image on scroll in HTML, CSS, and JS using GSAP and ScrollTrigger.

Subhash Chaudhary

December 31, 2021

5 min read

GSAP

GreenSock Animation Platform (GSAP) is a robust javascript animation framework designed primarily for web animations. You can essentially animate anything inside the HTML using GSAP. You can animate 3d models, divs, headers, paragraphs, svgs, and pretty much anything else. This library aids in the creation of web animations that are both robust and fully immersive.

GSAP is really amazing because you have precise control over the animations. Because this library provides timeline-based animations, you have complete control over every pixel. Yes, you read it correctly: timeline-based animations are used instead of keyframe animations, giving you more control over the animations.

What about performance?

Assume two websites with heavy animations, one created with traditional keyframe animation (or another animation library) and the other created with GSAP. What are your thoughts? Which site will outperform the others? Obviously, a website built with GSAP will have silky smooth animation. The interactive projects in this library have been optimized to be fully responsive, efficient, and buttery smooth.

You can visit GSAP official site at GSAP. Visit this site to see a performance test between GSAP and other animation libraries.

ScrollTrigger

ScrollTrigger is a GSAP plugin. This plugin is highly compatible and optimized with GSAP because it was created by GSAP. The ScrollTrigger plugin works similarly to GSAP in that it allows you to create animations, but the difference is that the animation will only play when the user scrolls the page or when the target element enters the viewport. This plugin should not be compared to the intersection observer because their working mechanisms are completely different. If you want your app to run faster, simply use ScrollTrigger instead of intersection observer.

Know more about Intersection Observer: Intersection Observer

Creating an image-reveal animation

We'll use GSAP and the ScrollTrigger plugin to make this animation. You must first create a new project before proceeding.

To begin, make a new folder and name it whatever you want (for example, reveal image), then open it in your favorite code editor. And also create images folder and put any image inside it and rename it to image.jpg

Second, create an index.html file, include GSAP and ScrollTrigger CDN links, and also give the link to our custom script.js file as given below.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/style.css" />
    <title>Reveal onscroll</title>
  </head>
  <body>
    <div class="top-section">Scroll down to see animation</div>
    <div class="img-container">Image Revealed</div>
    <div class="bottom-section">
      <h3>Scroll top to hide</h3>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem
        excepturi vero beatae quae mollitia blanditiis minima ab repellendus
        ipsa nihil.
      </p>
      <p>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Assumenda qui
        harum velit optio perspiciatis eaque cum, sapiente animi beatae quod
        facilis tempore, ipsa fugit, aspernatur hic! Ipsa aspernatur dolorem,
        veritatis quae, fugiat adipisci id laborum, neque officia ratione
        facere. Tenetur!
      </p>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/ScrollTrigger.min.js"></script>
    <script src="script.js"></script>
   
  </body>
</html>

Create a style.css file and paste the following code into it.

css/style.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  background-color: rgb(0, 0, 0);
  color: rgb(223, 223, 223);
  overflow-x: hidden;
}

.top-section {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3rem;
  font-weight: bold;
}

.img-container {
  width: 100%;
  height: 80vh;
  /* Download any image from pexels and give the background url */
  background-image: url("../images/image.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  font-weight: bold;
}

.bottom-section {
  max-width: 70ch;
  margin: 10rem auto;
}

.bottom-section > h3 {
  font-size: 3rem;
  font-weight: bold;
  margin-bottom: 30px;
}

.bottom-section > p {
  margin-bottom: 20px;
}

Finally, create a script.js file and paste the code below into it.

script.js

 let bgImage = document.querySelector(".img-container");
      //  Now registering thescrollTrigger plugin to gsap
      gsap.registerPlugin(ScrollTrigger);
      // Now we are going to animate

      gsap.fromTo(
        bgImage,
        {
          clipPath: "circle(5% at 77% 40%)",
        },
        {
          clipPath: "circle(75% at 50% 50%)",
          ease: "none",
          //  We want to do that animation on scroll
          scrollTrigger: {
            trigger: bgImage,
            scrub: 1,
            start: "top center",
            end: "top center-=200",
          },
        }
      );

Congratulation! with the help of GSAP and ScrollTrigger, you've created an image reveal animation on scrolls.

Reveal image on scroll in HTML, CSS, and JS using GSAP and ScrollTrigger.

GSAP

What about performance?

ScrollTrigger

Creating an image-reveal animation

SUBHASH CHAUDHARY

Social Links