A simple scroll animation library

HumbleScroll is a lightweight animation on scroll Javascript library. It's easy to use and has no dependencies. It's also very small, only 2kb gzipped.

Fade animations

Opacity from 0 to 1 - you know the drill.

Fade up

data-hs = "fade up"

Fade down

data-hs = "fade down"

Fade right

data-hs = "fade right"

Fade left

data-hs = "fade left"

Fade in

data-hs = "fade"

Fade up left

data-hs = "fade up left"

Zoom animations

Zoom in and out. Perfect for images.

Zoom in

data-hs = "zoom-in"

Zoom out

data-hs = "zoom-out"

Zoom out + right + up

data-hs = "zoom-out right up"

Zoom in + left + up

data-hs = "zoom-in left up"

Slide animations

Slide to the left, slide it to the right!

Slide right

data-hs = "right"

Slide left

data-hs = "left"

Slide up

data-hs = "right up"

Slide down

data-hs = "left up"

Flip animations

Who uses these? Here's four of them anyway.

Flip right

data-hs = "flip-right"

Flip left

data-hs = "flip-left"

Flip up

data-hs = "flip-up"

Flip down

data-hs = "flip-down"

Skew animations

Skew it to the left, skew it to the right! Combine with blur to make them feel blazingly fast.

Skew right

data-hs = "skew-right fade right 2xl blur fast ease-out-back"

Skew left

data-hs = "skew-left fade left 2xl blur fast ease-out-back"

Skew up

data-hs = "skew-up fade up xl blur fast ease-out-back"

Skew down

data-hs = "skew-down fade down xl blur fast ease-out-back"

Reveal

Parent has overflow hidden and child slides from 100% to 0

Reveal up

data-hs = "reveal-up fade"

Reveal down

data-hs = "reveal-down fade"

Reveal right

data-hs = "reveal-right fade"

Reveal left

data-hs = "reveal-left fade"

Easings

We only ship with a few easings, but you can easily add your own.

Ease in

data-hs = "ease-in fade up"

Ease out

data-hs = "ease-out fade up"

Ease in out

data-hs = "ease-in-out fade up"

Ease out back

data-hs = "ease-out-back fade up"

Blur effect

Who doesn't like a good motion blur effect?

Blur effect

data-hs = "fade right blur"

Blur effect

data-hs = "zoom-in fade up blur"

Blur effect

data-hs = "fade left blur"

Durations

Gotta go fast! Scales from the global duration.

Slow

data-hs = "zoom-in fade up right blur 2xl slow"

Extra slow

data-hs = "fade up left blur 2xl extra-slow"

Fast

data-hs = "fade up right blur 2xl fast"

Extra fast

data-hs = "fade up left blur 2xl extra-fast"

Stagger

Adjust delay for each item in a loop

Card 1

--hs-delay: 000ms

Card 2

--hs-delay: 100ms

Card 3

--hs-delay: 200ms

Card 4

--hs-delay: 300ms

Card 5

--hs-delay: 400ms

Card 6

--hs-delay: 500ms

Card 7

--hs-delay: 600ms

Card 8

--hs-delay: 700ms

Once

Stays visible even with repeat or mirror enabled

Once

data-hs = "fade up once"

Not once

data-hs = "fade up"

Responsive

Reponsive animations based on breakpoints. Use phone:, tablet: or desktop: prefix to target specific devices.

Example 1

data-hs = "fade phone:left tablet:up"

Example 2

data-hs = "fade up desktop:down"

JS Callback

Call a function when the element is visible. In this example I have a function called myFunction in main.js - easy right?

Can i haz callback function?

data-hs-call = "myFunction"