|  Interactive Media Design

Dynamic Scrolling

A common trend in website design is to alter the page's content as you scroll. This often involves animation as well. There are many different approaches to dynamic scrolling, and it would be impossible to cover them all. But the following will focus on two.

Scrolling Animation

This first approach comes from CSS-Tricks, and while it has a limited use case, it does demonstrate that scrolling animations can be accomplished uses very little JavaScript.

The JavaScript relies on three read only properties of JavaScript: window.pageYOffset, window.innerHeight, and offsetHeight. The window.pageYOffset property returns the number of pixels the document is currently scrolled along the vertical axis. The window.innerHeight property returns the viewport height in pixels. Finally, offsetHeight property returns the CSS height of an element. Together, these three properties are used to calculate the percentage of how far the page has been scrolled. The formula looks like this:

const percentage = window.pageYOffset / (document.body.offsetHeight - window.innerHeight))

Now, to ensure that this value is accessible to CSS, where the animating will occur, a CSS variable will be set to the value of the percentage.

const percentage = window.pageYOffset / (document.body.offsetHeight - window.innerHeight))
document.body.style.setProperty('--scroll', percentage)

Finally, to update the percentage as the user scrolls through the page, an event listener will be added to window, which will listen for the scroll event.

window.addEventListener('scroll', function () {
  const percentage = window.pageYOffset / (document.body.offsetHeight - window.innerHeight)
  document.body.style.setProperty('--scroll', percentage)
})

That is all the necessary JavaScript, so only CSS remains. The trick to making this work is using the animation-play-state and setting it to pause. Then adjust the animation-delay to walk through the animation as the page scrolls.

.animate {
  animation: rotate 1s linear infinite;
  animation-play-state: paused;
  animation-delay: calc(var(--scroll) * -1s); 
}

@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}

Animate on Scroll

The Animate on Scroll library, AOS, is one of the easier to use dynamic scrolling libraries. This is in part due to the fundamental idea that an animation library should not rely on JavaScript to write inline styles, but should instead add or remove classes. This also means that the AOS library comes a stylesheet. Many other libraries do not.

Installation

While you can download AOS library from GitHub, it is easier to use a CDN.

Add the styles to the <head>

<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />

Add the script tag before the closing </body> tag.

<script src="https://unpkg.com/aos@next/dist/aos.js"></script>

Basic Usage

To use the AOS library it must be first initialized by added the following commmand to the JavaScript.

AOS.init();

From there, the AOS custom data attributes can be added to the page. Do use the default behavior only the data-aos attribute needs to be used.

<div data-aos="fade-in"></div>

But the behavior can be adjusted using other attributes:

<div
    data-aos="fade-up"
    data-aos-offset="200"
    data-aos-delay="50"
    data-aos-duration="1000"
    data-aos-easing="ease-in-out"
    data-aos-mirror="true"
    data-aos-once="false"
    data-aos-anchor-placement="top-center"
  >
</div>