Animate Elements on Scroll with Rizzm.js

Preview:

Description:

Rizzm is a lightweight JavaScript library that applies built-in or custom animations to elements as they appear in the viewport while the user scrolls down the page.

It uses the Intersection Observer API to detect when elements become visible within the user’s viewport. The Web Animations API then triggers predefined or custom animations on those elements.

Rizzm provides a set of built-in animation keyframes that can be customized using CSS variables. For more complex animations, you can define their own keyframes within CSS.

All available animation keyframes:

• fadeIn
• fadeInUp
• fadeInDown
• fadeInLeft
• fadeInRight
• zoomIn
• zoomInRotate
• slideInUp
• slideInDown
• slideInLeft
• slideInRight
• flipInX
• flipInY
• bounceIn
• rotateIn

How to use it:

1. Install Rizzm using your preferred package manager:

# NPM
$ npm install rizzm
# BUN
$ bun add rizzm

2. Import it into your project.

import Rizzm from 'rizzm';

3. Create a new instance of Rizzm and apply it to your desired elements:

const rizzm = new Rizzm({
      // options here
});

4. Add the ‘js-rizzm’ CSS class to any element you want to animate, and then specify the animation using the following CSS variables:

• –rizzm-duration: Animation duration in milliseconds
• –rizzm-keyframe: Name of the animation keyframe to use
• –rizzm-stagger: Delay between animations of multiple elements
• –rizzm-from: Custom ‘from’ state of the animation (as JSON string)
• –rizzm-to: Custom ‘to’ state of the animation (as JSON string)
• –rizzm-prevent-animations: Set to ‘true’ to prevent animation on an element

<div
  class="js-rizzm"
  style="--rizzm-keyframe: fadeInUp; --rizzm-duration: 800;">
  Your content here
</div>

5. Customize further by setting animation properties directly in your CSS:

.my-element {
  --[keyframeName]-start-[property]:
  --[keyframeName]-end-[property]:
  // flipInX only
  --flipInX-perspective: 
  --flipInY-perspective:
  // rotateIn only
  --rotateIn-transformOrigin: 
  // bounceIn only
  --bounceIn-0-opacity: 0.1;
  --bounceIn-0-scale: 0.2;
  --bounceIn-50-opacity: 0.8;
  --bounceIn-50-scale: 1.1;
  --bounceIn-70-scale: 0.95;
  --bounceIn-100-opacity: 1;
  --bounceIn-100-scale: 1;
  
}

6. Customize Rizzm’s behavior by passing a configuration object when creating the instance:

• selector: The CSS selector(s) for the elements to be animated.
• options.root: The element that is used as the viewport for checking visibility.
• options.rootMargin: Default margin around the root.
• options.threshold: Default threshold of intersection ratio.
• options.stagger: Default delay between the animations of each element.
• customKeyframes: Custom keyframe animations.
• paused: Whether to initialize the observer immediately.

const rizzm = new Rizzm({
      selector = ".js-rizzm",
      options: {
        root: null,
        rootMargin: "0px",
        threshold: 0.2,
        stagger: 200,
      }
      customKeyframes: {
        // Your custom keyframes here
      },
      paused: false
});

7. Update the Rizzm instance in cases where new elements are added to the DOM:

rizzm.updateElements();
// or
rizzm.updateElements('.new-elements');
// or
rizzm.updateElements(document.querySelectorAll('.new-elements'));