Beyond
JavaScript.

The ultimate scroll animation library powered entirely by CSS Scroll-Driven Animations. Version 2.0 brings Horizontal Scrolling, Mask Reveals, and Neon Glows.

Usage Example
<div
  class="roopm-animate"
  data-roopm-effect="fade-up"
  data-roopm-duration="1s"
>Content</div>

01. Horizontal

.roopm-horizontal-section

02. Scroll

animation-timeline: --hz-scroll

03. Without

Zero JavaScript Observers

04. JavaScript

100% Pure CSS Magic

V2 Features

Premium Reveals

Mask Circle

data-roopm-effect="mask-reveal-circle"

Mask Wipe

data-roopm-effect="mask-reveal-wipe"

Neon Glow Scrub

data-roopm-effect="neon-glow"

V1 Core

Entry Animations

fade-up

Smooth Rise

Translates up and fades in.

scale-up

Spring Pop

Grows into view with a spring ease.

zoom-in

Dramatic Blur

Zooms from 150% with a blur filter.

flip-x

3D Perspective

Rotates on the X-axis into place.

reveal-left

Clip Wipe

Cinematic clip-path reveal.

rotate-right

Subtle Spin

Rotates and floats upwards.

Scrubbing

Scroll Linked

fade-up 0.9s ease-out
scale-up 1.2s spring
blur-in 0.8s sharp
flip-x 0.7s expo-out
Scroll Progress
SCRUB
parallax-slow auto linear
scrub-rotate-cw auto linear
scrub-slide-x auto linear
scrub-scale auto linear
Depth

Parallax Scrub

Background

parallax-slow (150px)

Midground

parallax-slow (60px)

Foreground

parallax-fast (30px)

GSAP Style

Sticky Pinning

01. Container

Sets the scroll duration (300vh).

02. Sticky

Element sticks to the screen.

PINNED

03. Timeline

Named view-timeline links children.

04. Pure CSS

Zero JS Observers needed.

Typography

Word by word
staggered reveal.

The .roopm-text-clip and .roopm-text-reveal classes automatically stagger your typography on scroll.

Documentation

API Reference

Attribute Description
class="roopm-animate" Base class. Attach to any element to enable scroll animation.
data-roopm-effect The animation effect (e.g. fade-up, mask-reveal-circle, neon-glow).
data-roopm-scrub="true" Links animation 1:1 to scroll position (No duration needed).
class="roopm-horizontal-section" Creates a vertical scroll area that moves children horizontally.
class="roopm-pin-container" Wrap around .roopm-pin to create a GSAP-style pinned section.