On-Scroll Animation
Tags: animation, frontend, css, javascript
Published: 2024-06-05 21:30:47

Hey everyone!

I recently worked on a cool feature: **on-scroll animations**. 
These animations make your site more engaging and interactive. I used the Intersection Observer API to achieve this effect, and it was surprisingly easy. Here’s a quick rundown of how I did it.

**HTML**
First, I set up the HTML structure. I created several sections that would animate into view as the user scrolls. Here’s the code:

```
<body>
  <section class="hidden">
    <h1>Hello Folks!</h1>
    <p>On scroll code snippet</p>
  </section>
  <section class="hidden">
    <h2>Tech Stack</h2>
    <div class="logos">
      <div class="logo hidden">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTYk594AhSKw5Eb3iHkPHs_XmpCqaRVgu0mvg&s" alt="logo">
      </div>
      <div class="logo hidden">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ_9-dX6ofdk9qorLSVu4R02VV2StVoC1rboA&s" alt="logo">
      </div>
      <div class="logo hidden">
        <img src="https://logodownload.org/wp-content/uploads/2022/04/javascript-logo-1.png" alt="logo">
      </div>
      <div class="logo hidden">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcThGyyY4OZ3bk3rFDaYtAbHR8htxrLHnjw2nxRL_80Xs7F0KG8-4dgIxP-wtQKFhdyXyvQ&usqp=CAU" alt="logo">
      </div>
    </div>
  </section>
  <section class="hidden">
    <h2>Front End Engineering</h2>
    <p>The things you own end up owning you! It's only after you lose everything that you're free to do anything</p>
  </section>
</body>

```
**CSS**
Next, I wrote some CSS to style the sections. The key was to start with the elements hidden and then animate them into view. Here’s what the CSS looks like:

```
body {
  background-color: #131316;
  color: #ffffff;
  font-family: 'Poppins', sans-serif;
  padding: 0;
  margin: 0;
}

section {
  display: grid;
  place-items: center;
  align-content: center;
  min-height: 100vh;
}

.hidden {
  opacity: 0;
  filter: blur(5px);
  transform: translateX(-100%);
  transition: all 1s;
}

.show {
  opacity: 1;
  filter: blur(0);
  transform: translateX(0);
}

.logos {
  display: flex;
}

.logo {
  margin-left: 2px;
  margin-right: 2px;
}

.logo img {
  height: 100px;
}

.logo:nth-child(2) {
  transition-delay: 200ms;
}

.logo:nth-child(3) {
  transition-delay: 400ms;
}

.logo:nth-child(4) {
  transition-delay: 600ms;
}

```

**JavaScript for Intersection Observer**
The real magic happens with JavaScript. I used the Intersection Observer API to detect when each section comes into view and apply the animation. Here’s the script:

```
document.addEventListener('DOMContentLoaded', () => {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        entry.target.classList.add('show');
      } else {
        entry.target.classList.remove('show');
      }
    });
  });

  const hiddenElements = document.querySelectorAll('.hidden');
  hiddenElements.forEach((el) => observer.observe(el));
});

```

**How It Works**

**HTML**
- I created sections with the class **hidden** which will be animated into view.

**CSS**

- The .hidden class hides the elements initially using opacity, blur, and transform properties.
- The .show class makes the elements visible by resetting these properties.

**JavaScript**
- An **IntersectionObserver** checks if elements are in the viewport.
- When elements come into view, the **show** class is added to make them visible.

And that’s it! With this setup, as you scroll down the page, the hidden sections will smoothly animate into view. This little touch can really enhance the user experience on your site. I had a lot of fun implementing it, and I hope you do too. 
**Happy coding!**

Also, Check out this Pen I made!

{% codepen https://codepen.io/Alikhanzada577/pen/pomwNqo %}