Animate On Scroll Using CSS @keyframes – Scrollerful.js

Preview:

Description:

Scrollerful.js is a lightweight AOS (animate on scroll) JavaScript library for animating elements on scroll using CSS keyframes and variables.

How to use it:

1. Download and import the Scrollerful.js library.

<script src="dist/scrollerful.js"></script>

2. The required HTML structure.

<div class="scrollerful scrollerful--snap">
  <div class="scrollerful__tray">
    <div class="scrollerful__plate">
      <p class="scrollerful__sprite">Element 1</p>
    </div>
  </div>
  <div class="scrollerful__tray">
    <div class="scrollerful__plate">
      <p class="scrollerful__sprite">Element 2</p>
    </div>
  </div>
  <div class="scrollerful__tray">
    <div class="scrollerful__plate">
      <p class="scrollerful__sprite">Element 3</p>
    </div>
  </div>
  ...
</div>

3. Animate the elements using CSS.

@keyframes element-1 {
  from {
    /* ... */
  }
  to {
    /* ... */
  }
}
@keyframes element-2 {
  from {
    /* ... */
  }
  to {
    /* ... */
  }
}
@keyframes element-3 {
  from {
    /* ... */
  }
  to {
    /* ... */
  }
}
.scrollerful__tray:nth-child(1) > .scrollerful__plate > .scrollerful__sprite {
  animation-name: element-1;
}
.scrollerful__tray:nth-child(2) > .scrollerful__plate > .scrollerful__sprite {
  animation-name: element-2;
}
.scrollerful__tray:nth-child(3) > .scrollerful__plate > .scrollerful__sprite {
  animation-name: element-3;
}

Changelog:

v0.6.4 (04/09/2023)

• Update

v0.5.1 (02/05/2023)

• Remove console.log() call

v0.5.0 (02/01/2023)

• Fix variable name in scrollerful.sass

v0.4.6 (01/18/2023)

• Update

v0.4.5 (01/16/2023)

• Add variables and animation on scrolls