Animate Elements On View While Scrolling – HumbleScroll.js

Preview:

Description:

A lightweight (~1.5kb gzipped) AOS (animation on scroll) JavaScript library that can be easily integrated into any webpage, aimed at adding interactivity and visual interest to your elements & UI components.

How to use it:

1. Import the HumbleScroll’s JavaScript and CSS files into the document.

<link rel="stylesheet" href="cdn/css/humbleScroll.min.css" />
<script src="cdn/js/humbleScroll.js"></script>

2. Initialize the HumbleScroll.js.

const scroll = new HumbleScroll({
      // options here
})

3. Add built-in animations to the target elements using the data-hs attribute:

// Fade Animations
<div data-hs="fade"></div>
<div data-hs="fade up"></div>
<div data-hs="fade down left"></div>
// Custom delay
<div data-hs="fade up" style="--hs-delay: 200ms"></div>
// Slide Animations
<div data-hs="up"></div>
<div data-hs="down"></div>
<div data-hs="left"></div>
<div data-hs="right"></div>
// Custom Translate
<div data-hs="down" style="--hs-translate-y-amount: 8rem"></div>
<div data-hs="right" style="--hs-translate-x-amount: 10rem"></div>
// Flip Animations
<div data-hs="flip-up"></div>
<div data-hs="flip-down"></div>
<div data-hs="flip-left"></div>
<div data-hs="flip-right"></div>
// Zoom in/out Animations
<div data-hs="zoom-in"></div>
<div data-hs="zoom-out"></div>
// Custom scale ratio
<div data-hs="zoom-out" style="--hs-scale-ratio: 0.2"></div>
// Blur Animations
<div data-hs="blur"></div>
// Custom blur size
<div data-hs="blur" style="--hs-blur: 40px"></div>

4. Apply easing functions to the animations.

<div data-hs="ease-in"></div>
<div data-hs="ease-out"></div>
<div data-hs="ease-in-out"></div>

5. Set the size variations.

<div data-hs="sm"></div>
<div data-hs="md"></div>
<div data-hs="lg"></div>
<div data-hs="xl"></div>
<div data-hs="2xl"></div>

6. Customize the animation speed.

<!-- Duration * 3 -->
<div data-hs="extra-slow"></div>
<!-- Duration * 1.5 -->
<div data-hs="slow"></div>
<!-- Duration * 0.5 -->
<div data-hs="fast"></div>
<!-- Duration * 0.25 -->
<div data-hs="extra-fast"></div>

7. Determine whether the animation runs only once.

<div data-hs="flip-right up lg slow once once"></div>

8. You can also specify the animation to use depending on the device type.

<div data-hs="fade up desktop:down"></div>
<div data-hs="fade left tablet:right desktop:left"></div>
<div data-hs="fade phone:up"></div>

9. Config the animations by overriding the default CSS variables.

:root {
  --hs-delay: 0ms;
  --hs-easing: var(--hs-ease-out);
  --hs-duration: 600ms;
  --hs-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --hs-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --hs-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --hs-opacity: 1;
  --hs-visibility: visible;
  --hs-translate-y: 0;
  --hs-translate-x: 0;
  --hs-scale: 1;
  --hs-rotate: 0deg;
  --hs-ratio: 1;
  --hs-translate-ratio: 1;
  --hs-scale-ratio: 0.2;
  --hs-duration-ratio: 1;
  --hs-translate-x-amount: 2rem;
  --hs-translate-y-amount: 3rem;
  --hs-blur: 0;
}

10. Available options.

const scroll = new HumbleScroll({
      // Root container to observe
      root: null,
      // Element to observe
      element: `[data-${this.prefix}]`, 
      // Wheter to enable callback function on intersect
      enableCallback: false, 
      // Callback data-attribute to call on intersect
      callback: `data-${this.prefix}-call`, 
      // Class added when element is visible
      class: `${this.prefix}-inview`, 
      // Class added when HumbleScroll loaded
      initClass: `${this.prefix}-init`, 
      // Intersection threshold where 0.1 is 10% of the element
      threshold: 0.1, 
      // Offset to add to the root margin
      offset: {
        top: 0,
        right: 0,
        bottom: -40,
        left: 0,
      }, 
      // Direction to calculate root max height or max width
      direction: 'vertical',
      // Wheter to repeat the animation when scrollin from top
      repeat: false, 
      // Wheter to mirror the animation when leaving
      mirror: false, 
      // Event to start the initialization
      startEvent: 'DOMContentLoaded', 
})

Changelog:

10/23/2022

• Added: Combine media queries