How To Animate Scroll In JavaScript?

Although it typically requires the use of a plugin or library, making components display based on their scroll position is a fairly popular design decision when creating web pages. This tutorial will teach you how to use CSS and vanilla JavaScript to add animation to scroll.

Our method uses JavaScript to handle triggering the required styles and CSS for animations. First, we'll design the layout.

Read Also: What are the key topics you will learn from the JavaScript syllabus?

1. Establish the Page Structure

After utilizing HTML to design the page's layout, we'll give the items we wish to animate on scroll a common class name. We'll be using JavaScript to target this class name.

The elements in the aforementioned demo were given the class name js-scroll, resulting in HTML that looks like this:

<header>
  <!--this is where the content of the header goes-->
</header>
<section class="scroll-container">
    <div class="scroll-element js-scroll">
    </div>
    <div class="scroll-caption">
      This animation fades in from the top.
    </div>
</section>

2. Styling With CSS

Since CSS chooses each element's animation style, it does a lot of the heavy lifting. In this instance, the class name will be scrolled in a scroll animation that we create.

Must Know: What are the top 10 JavaScript concepts programmers should know to excel in web development?

Here's an illustration of a basic JavaScript fade-in animation:

.js-scroll {
  opacity: 0;
  transition: opacity 500ms;
}
.js-scroll.scrolled {
  opacity: 1;
}

Until the class name scrolled is applied to it, each js-scroll element on the page is hidden with an opacity of 0.

3. JavaScript-Based Elements Targeting

After we have our styles and layout, we will write the JavaScript routines that will give the elements their class name when they scroll into view. Additionally, since we want the elements to be visible even if a browser does not have JavaScript enabled, we will fade them out using JavaScript rather than CSS.

We'll dissect the reasoning as follows:

• Retrieve all of the page's js-scroll components.
• Elements that fade out
• Determine whether the object is inside the viewport.
• If the element is visible, give it the scrolling class name.

Target Page Elements

The document.querySelectorAll() method will be used to target every js-scroll element on the page. This is how it ought to appear:

const scrollElements = document.querySelectorAll(".js-scroll");

Elements That Fade Out

The opacity:0 for.js-scroll in our CSS must be removed first. Next, we add the following line to our JavaScript:

scrollElements.forEach((el) => {
  el.style.opacity = 0
})

Recognizing the Presence of an Element

By calculating if the element's distance from the top of the page is less than the height of the viewable portion of the page, we can determine when an element is in the user's line of sight.

We utilize the getBoundingClientRect() function in JavaScript.top way to get the distance between an element and the window's and page's top.document.documentElement.client or innerHeightHeight to determine the viewport's height.

Using the reasoning above, we will construct an elementInView function:

const elementInView = (el) => {
  const elementTop = el.getBoundingClientRect().top;
  return (
    elementTop <= (window.innerHeight || document.documentElement.clientHeight)
  );
};

This function can be changed to detect when a percentage of the page has been scrolled or when the element has scrolled x pixels into the page.

const elementInView = (el, scrollOffset = 0) => {
  const elementTop = el.getBoundingClientRect().top;
  return (
    elementTop <= 
    ((window.innerHeight || document.documentElement.clientHeight) - scrollOffset)
  );
};