v2.3 · Pure CSS · Zero JS

Scroll Animations
Reimagined.

The most advanced pure CSS scroll animation library. Horizontal scrolling, mask reveals, glassmorphism — no JavaScript.

✓Horizontal ✓Masks ✓Glow ✓25+ Effects ✓Accessible
Scroll to explore
What's New

CSS at the
Absolute Edge

Every feature uses animation-timeline. Zero JavaScript.

↔

Horizontal Scroll

Vertical → horizontal via sticky + scroll().

◎

Mask Reveals

Circle, diamond, wipe via clip-path.

✦

Neon Glow

Dynamic box-shadows on scroll.

◈

Glassmorphism

Progressive blur on scroll.

▤

Parallax BG

Background-position via view().

♿

Accessible

Reduced motion + @supports fallback.

v2.3 Feature

Horizontal Scroll
Via Vertical Input

Scroll down — content moves horizontally.

01

Scroll-Linked Motion

Every animation is tied to scroll position via CSS animation-timeline. No event listeners. No JS runtime.

02

25+ Premium Effects

Fade, scale, rotate, flip, blur, reveal, mask, parallax, glow — all GPU-optimized.

03

HTML-Driven API

Control via data-roopm-* attributes. Effect, duration, delay, easing — all from markup.

04

Bulletproof Fallbacks

Wrapped in @supports. Firefox/Safari get static designs. Zero broken layouts.

Mask Reveals

Advanced
Reveal Effects

Animated clip-path reveals. Scroll slowly.

mask-circle
mask-diamond
mask-wipe
reveal-left
reveal-up
Neon Glow

Scroll-Driven
Radiance

Box shadows expand dynamically. Scroll slowly.

Cyan Scroll-linked
Purple Peak at center
Pink Fades on exit
Parallax

Depth via
Background Motion

Background Moves
With Scroll

.roopm-parallax-bg animates background-position 15% → 85%.

Effects Grid

Every Effect
In Action

Each card uses a different animation. Scroll through to see them all.

zoom-in

Cinematic Entry

Scales from 0.35

fade-up

Classic Rise

Most popular effect

flip-x

3D Flip

X-axis rotation

reveal-left

Curtain

Clip-path wipe

mask-circle

Circle Mask

v2.3 feature

blur-in

Focus Shift

Blur → sharp

scale-up + spring

Bouncy Scale

Spring easing

fade-right

Slide In

Horizontal entry

mask-diamond

Diamond Reveal

Polygon clip-path

Pin & Scrub

Sticky Sections
+ Scroll Scrub

Pin elements while content flows. Combine with scrubbing.

↻
◉

Left: 360° rotation  |  Right: Scale pulse

PIN

Pinned — Scroll ↓

Sticks for 250vh. Progress bar via scroll().

01

Content Resumes

After pin ends, flow continues seamlessly.

02

Adjustable Duration

Change --roopm-pin-height for longer pins.

03

Combine Everything

Nest scrub animations inside pinned containers for scroll storytelling.

Quick Start

Three Lines.
Done.

<!-- 1. Link the CSS -->
<link rel="stylesheet" href="roopm-scrolltrigger.css">

<!-- 2. Add class + effect -->
<div class="roopm-animate"
     data-roopm-effect="fade-up">
  Hello, scroll world!
</div>

<!-- ⚠ Use overflow-x: clip NOT hidden -->
html { overflow-x: clip; }
body { overflow-x: clip; }

<!-- ★ Horizontal Scroll -->
<div class="roopm-horizontal-section"
     style="--roopm-h-panels: 3;">
  <div class="roopm-horizontal-sticky">
    <div class="roopm-horizontal-track">
      <div class="roopm-horizontal-panel">1</div>
      <div class="roopm-horizontal-panel">2</div>
      <div class="roopm-horizontal-panel">3</div>
    </div>
  </div>
</div>

<!-- ★ Progress Bar -->
<div class="roopm-progress-bar"></div>

<!-- ★ Neon Glow -->
<div class="roopm-animate"
     data-roopm-effect="neon-glow"
     data-roopm-scrub="true"
     style="--roopm-glow-color-b: rgba(0,229,255,.5);">
  Glowing content
</div>

<!-- ★ Mask Reveals -->
<div class="roopm-animate"
     data-roopm-effect="mask-reveal-circle">
  Expanding circle reveal
</div>

<!-- ★ Glassmorphism Header -->
<nav class="roopm-glass"
     data-roopm-glass="header">
  Gets blurry on scroll
</nav>

<!-- ★ Parallax Background -->
<div class="roopm-parallax-bg"
     style="background-image: url(bg.jpg);">
  Background shifts with scroll
</div>

No JS.
Just CSS.

Built with ♥ by RoopM

roopm-scrolltrigger.css v2.3.0 · MIT

TopHorizontalMasksGlowGridPin