CodePen Embed - Create Beautiful Scrolling Animations With the CSS clip-path Property

<section class="hero-section">
  <div>
    <h1>Reveal Images on Scroll <span>(<code>clip-path</code> animation)</span></h1>
    <p>👇 Scroll down</p>
  </div>
</section>
<section class="main-section">
  <section class="grid">
    <figure>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/cinque-terre-back.jpg" alt="">
      <figcaption>Cinque Terre</figcaption>
    </figure>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum, dignissimos quo hic repellendus libero tempora perferendis numquam ipsam minus doloribus error quas! Accusantium, obcaecati fugit? Eaque culpa ea maxime consectetur.</p>
  </section>
  <section class="big-text">
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestiae praesentium, ea nam est sit repellendus blanditiis nisi optio facilis cumque rem! Laudantium eos minus quas molestias, ratione sit? Necessitatibus, illum.</p>
  </section>
  <section class="grid grid-alternate">
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum, dignissimos quo hic repellendus libero tempora perferendis numquam ipsam minus doloribus error quas! Accusantium, obcaecati fugit? Eaque culpa ea maxime consectetur.</p>
    <figure>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/cinque-terre-back.jpg" alt="">
      <figcaption>Cinque Terre</figcaption>
    </figure>
  </section>
  <section class="big-text">
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestiae praesentium, ea nam est sit repellendus blanditiis nisi optio facilis cumque rem! Laudantium eos minus quas molestias, ratione sit? Necessitatibus, illum.</p>
  </section>
  <section class="grid">
    <figure>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/cinque-terre-back.jpg" alt="">
      <figcaption>Cinque Terre</figcaption>
    </figure>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum, dignissimos quo hic repellendus libero tempora perferendis numquam ipsam minus doloribus error quas! Accusantium, obcaecati fugit? Eaque culpa ea maxime consectetur.</p>
  </section>
  <section class="big-text">
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestiae praesentium, ea nam est sit repellendus blanditiis nisi optio facilis cumque rem! Laudantium eos minus quas molestias, ratione sit? Necessitatibus, illum.</p>
  </section>
  <section class="grid grid-alternate">
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatum, dignissimos quo hic repellendus libero tempora perferendis numquam ipsam minus doloribus error quas! Accusantium, obcaecati fugit? Eaque culpa ea maxime consectetur.</p>
    <figure>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/162656/cinque-terre-back.jpg" alt="">
      <figcaption>Cinque Terre</figcaption>
    </figure>
  </section>
</section>
<footer class="page-footer">
  <span>made by </span>
  <a href="https://georgemartsoukos.com/" target="_blank">
    <img width="24" height="24" src="https://assets.codepen.io/162656/george-martsoukos-small-logo.svg" alt="George Martsoukos logo">
  </a>
</footer>

/* RESET STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
:root {
  --blue: #0a0c10;
  --blue-sudo: #1e242f;
  --white: #fff;
}

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

img {
  max-width: 100%;
}

body {
  font: clamp(16px, 2vw, 22px) / 1.7 "Montserrat", sans-serif;
}

.hero-section {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  text-align: center;
  color: var(--white);
  background: var(--blue);
}

.hero-section p {
  margin-top: 5px;
}


/* MAIN STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.main-section {
  max-width: 1400px;
  padding: 0 30px;
  margin: 120px auto;
}

.main-section section + section {
  margin-top: 120px;
}

.main-section .grid {
  display: grid;
  grid-column-gap: 60px;
  grid-template-columns: 2fr 1fr;
}

.main-section .grid-alternate {
  grid-template-columns: 1fr 2fr;
}

.main-section .big-text {
  max-width: 800px;
  margin-left: auto;
  font-size: clamp(24px, 2vw, 32px);
}

.main-section figure {
  position: relative;
  box-shadow: -1rem 1rem 3rem -2rem rgba(0, 0, 0, 0.5);
}

.main-section figure::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--blue-sudo);
  transition: clip-path 0.3s;
}

.main-section figure img {
  display: block;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.6s 0.3s;
}

.main-section figure figcaption {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 10px;
  font-weight: bold;
  text-transform: uppercase;
  color: var(--white);
  background: var(--blue);
  mix-blend-mode: overlay;
  transition: clip-path 0.3s 0.9s;
}

.main-section figure::before,
.main-section figure figcaption {
  clip-path: inset(0 0 0 100%);
}

.main-section figure.is-animated::before,
.main-section figure.is-animated img,
.main-section figure.is-animated figcaption {
  clip-path: inset(0);
}


/* MQ STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media (max-width: 1000px) {
  .hero-section span {
    display: block;
  }

  .main-section {
    margin: 60px auto;
  }

  .main-section section + section {
    margin-top: 60px;
  }

  .main-section .grid {
    grid-template-columns: 1fr;
    grid-row-gap: 30px;
  }

  .main-section .grid-alternate figure {
    order: -1;
  }
}


/* FOOTER STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.page-footer {
  position: fixed;
  right: 0;
  bottom: 20px;
  display: flex;
  align-items: center;
  font-size: 1rem;
  padding: 5px;
  background: var(--white);
}

.page-footer a {
  margin-left: 4px;
}

const targets = document.querySelectorAll(".main-section .grid figure");
const isAnimated = "is-animated";
const threshold = 0.5;

function callback(entries, observer) {
  entries.forEach((entry) => {
    const elem = entry.target;
    if (entry.intersectionRatio >= threshold) {
      elem.classList.add(isAnimated);
      //observer.unobserve(elem);
    } else {
      elem.classList.remove(isAnimated);
    }
  });
}

const observer = new IntersectionObserver(callback, { threshold });
for (const target of targets) {
  observer.observe(target);
}

This Pen is owned by Envato Tuts+ on CodePen.

See more by @tutsplus on CodePen

External CSS

https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap

External JavaScript

This Pen doesn't use any external JavaScript resources.