Animate On Scroll Using CSS @keyframes – Scrollerful.js

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="sclf sclf--snap">
  <div class="sclf__tray">
    <div class="sclf__plate">
      <p class="sclf__sprite">Element 1</p>
    </div>
  </div>
  <div class="sclf__tray">
    <div class="sclf__plate">
      <p class="sclf__sprite">Element 2</p>
    </div>
  </div>
  <div class="sclf__tray">
    <div class="sclf__plate">
      <p class="sclf__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 {
    /* ... */
  }
}

.sclf__tray:nth-child(1) > .scrollerful__plate > .scrollerful__sprite {
  animation-name: element-1;
}

.sclf__tray:nth-child(2) > .scrollerful__plate > .scrollerful__sprite {
  animation-name: element-2;
}

.sclf__tray:nth-child(3) > .scrollerful__plate > .scrollerful__sprite {
  animation-name: element-3;
}

Changelog:

v1.2.0 (12/09/2023)

• Remove broken animation-timeline support

v1.0.0 (04/14/2023)

• The scrollerful prefix has been shortened to sclf. This affects CSS class names, JavaScript functions and events. See below for a list.
• The top element wrapping all containers is no longer needed.
• Nomenclature of inner and outer sprites has been changed to contain and cover, respectively, matching upcoming CSS standards.
• Event names have been changed to match the new prefix and have colons in them.
• Addition of rudimentary animation-timeline support.

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

The post Animate On Scroll Using CSS @keyframes – Scrollerful.js appeared first on CSS Script.