Wrap your text in spans or use `.roopm-text-effect` for character/word-by-word magic.
Every animation is configurable via `data-roopm-*` attributes. Mix, match, and customize.
data-roopm-effect="fade-up"
easing="spring"
distance="xl"
scale="heavy"
Dramatic blur
Smooth entrance
Perspective
Messy to clean
Transform origin
Bottom pivot
Focus transition
Cinematic pop
Hardware-accelerated `clip-path` and mask animations. Zero layout shift. Perfect for images and content blocks.
Radial reveal
Geometric wipe
Clean slide
Inset animation
Keep scrolling down to push the next card onto the previous one. Perfect for feature lists.
Built on modern CSS View Timeline API. No JavaScript listeners, no scroll jank, just pure hardware-accelerated compositing.
This card beautifully masks the first one while pushing. Uses `animation-range: exit` for precise scroll-linked compression.
Perfectly responsive layout tracking. Scales flawlessly across mobile, tablet, and desktop viewports.
Powered by CSS `view-timeline`. Touch-optimized for mobile, pixel-perfect on desktop.
Uses `calc(100vw - gap)` for seamless edge-to-edge panels with perfect center alignment.
Backdrop filters, smooth borders, and depth shadows animate naturally with scroll position.
The entire scroll experience is driven by native browser engines. Maximum performance, minimum footprint.
Pin elements in place while scrolling, with optional progress indicators and scroll-linked animations. The rotating icon below tracks the exact container scroll range.
class="roopm-pin-linked" → 360° Scrub Track