RSK World - Scroll Reveal Animations | Fade, Slide, Scale, Intersection Observer | RSK World

Fade & Slide Scale & Rotate Blur & Clip Counters & Typewriter Vanilla JS

Scroll Reveal Animations is a scroll-triggered UI effects demo. Features: data-reveal types (fade, slide-left/right/up/down, scale, rotate, blur, clip, line-draw, bounce, flip), optional data-delay for stagger. Scroll progress bar, section indicator, Reveal All button. Parallax hero, split-text title reveal. Animated counters (data-counter, data-duration), progress bars (data-fill), typewriter (data-typewriter), line-by-line content from lines.js. Respects prefers-reduced-motion. Files: index.html, styles.css, script.js, lines.js. By rskworld.in.

If you find this Scroll Reveal Animations project useful, you can support with a small contribution.

Secure Fast Trusted

Pay via UPI QR

Scan or tap an amount to auto-generate

₹

Open UPI app

GPay PhonePe Paytm

Download Scroll Reveal Animations

Intersection Observer & Reveal

script.js uses Intersection Observer to watch all [data-reveal] elements. When an element enters the viewport (threshold 0.15, rootMargin -80px bottom), it gets class "revealed" and is unobserved. CSS transitions handle fade, slide, scale, rotate, blur, clip-path, bounce, flip.

REVEAL_SELECTOR = [data-reveal], DEFAULT_THRESHOLD 0.15
observer adds .revealed and applies data-delay as transition-delay
skill-row and counter-card trigger fill/count on reveal
typewriter-wrap triggers typewriter() when visible

Project Structure & Files

index.html (sections and data-reveal markup), styles.css (layout, theme, all reveal keyframes and transitions), script.js (observer, scroll progress, section indicator, reveal all, parallax, split reveal, line inject, counters, typewriter, back-to-top), lines.js (ScrollRevealLines.LINES for line-by-line section). No build step.

index.html, styles.css, script.js, lines.js, README.md, LICENSE
No build step – open index.html or static server
Google Fonts: Outfit, JetBrains Mono
Zero dependencies; vanilla HTML, CSS, JavaScript

Reveal Types & Stagger

data-reveal values: fade, slide-left, slide-right, slide-up, slide-down, scale, rotate, blur, clip, line-draw, bounce, flip, line (for line items). Optional data-delay in ms for staggered sequence. CSS :root --reveal-duration and --reveal-ease; prefers-reduced-motion shortens animations.

Fade/slide/scale/rotate/blur/clip/bounce/flip in styles.css
data-delay applied as transition-delay when revealed
prefers-reduced-motion: --reveal-duration 0.01s, step-end
Reveal All button reveals everything for accessibility

Scroll UI & Parallax

Scroll progress bar (fixed top, width by scroll %). Section indicator in header updates from [data-section]. Parallax hero layers (hero-parallax-bg, hero-parallax-fg) move with scroll; disabled if prefers-reduced-motion. Split-text hero title: letters in .split-char animate with staggered delay when [data-split-reveal] is visible.

initScrollProgress: requestAnimationFrame + passive scroll
initSectionIndicator: second observer on [data-section]
initParallax: translateY by scrollY * 0.15 / 0.25
Split reveal: .split-char nth-child transition-delay

Counters, Progress & Typewriter

Animated counter: [data-counter] and [data-duration]; animateCounter() uses requestAnimationFrame with easeOut cubic. Progress bars: .skill-fill[data-fill] width set when .skill-row is revealed. Typewriter: [data-typewriter] text typed character-by-character when .typewriter-wrap is visible; respects reduced motion.

animateCounter: easeOut cubic, requestAnimationFrame
skill-fill width and skill-pct text set on parent reveal
typewriter(): 40ms per char, or instant if reduced motion
Line-by-line: initLineReveal() injects from ScrollRevealLines.LINES

What You Get

Static HTML/CSS/JS: index.html, styles.css, script.js, lines.js, README.md, LICENSE (MIT). No build step. Open index.html or serve folder.

Complete source – HTML, CSS, JS, lines data
No build step – open index.html or static server
README.md, LICENSE (MIT) included
Technologies: HTML5, CSS3, Vanilla JS. © 2026 RSK World.

Usage

Add data-reveal="fade" (or slide-left, scale, blur, clip, bounce, flip, etc.) to elements. Optional data-delay="100". Include lines.js before script.js for line-by-line section; edit ScrollRevealLines.LINES in lines.js. Script observes [data-reveal] and adds .revealed on viewport intersect.

index.html – main page with all demo sections
script.js: initScrollReveal, initSplitReveal, initLineReveal, etc.
Accessibility: Reveal all, prefers-reduced-motion, aria-labels
Author: RSK World | rskworld.in

Project Features

Scroll-triggered fade, slide, scale, rotate, blur, clip-path, line-draw, bounce, 3D flip. Staggered delays. Scroll progress bar, section indicator, Reveal All. Parallax hero, split-text title. Counters, progress bars, typewriter, line-by-line from lines.js. Back to top. Reduced motion support.

Reveal types – fade, slide, scale, rotate, blur, clip, bounce, flip
Scroll progress bar and section indicator in header
Counters, progress bars, typewriter, line-by-line
Back to top button after 400px scroll

Credits & Acknowledgments

Scroll Reveal Animations by RSK World. Scroll-triggered reveal effects with Intersection Observer for learning scroll animations and vanilla JS.

Scroll Reveal Animations – Intersection Observer, CSS transitions
RSK World – Project creator and educational platform
Author: Molla Samser (Founder - RSK World)
Website: https://rskworld.in
Email: info@rskworld.com | +91 93305 39277
© 2026 RSK World. All rights reserved.

Support & Contact

For Scroll Reveal Animations customization or integration help, please contact us.

Email: info@rskworld.com
Phone: +91 93305 39277
Website: RSKWORLD.in
Location: Nutanhat, Mongolkote, Purba Burdwan, West Bengal, India - 713147
Author: Molla Samser (Founder, RSK World)
Scroll Reveal Animations - README
Technical Support Available
UI Component Requests Welcome

Additional Sponsored Content

Download Scroll Reveal Animations

Get the complete Scroll Reveal Animations project. You can view the files or download the source code directly.

Download Scroll Reveal Animations

Technologies

Intersection Observer

CSS3 Transitions

Responsive

Accessibility

Vanilla JS

Featured Projects

UI/UX & Scroll Effect Projects by RSK World

3D Transforms CSS Perspective JavaScript Animations Canvas API LocalStorage Particle Effects

Form Input Components

Micro UI Components

Collection of styled form input components with validation states.

View Project

Search Filter Demo

JavaScript Demos

Real-time search filter with instant results and highlight matching.

View Project

CSS Neon Button Hover

CSS UI Effects

Glowing hover effect using CSS box-shadow and transitions.

View Project

Text Animation Effects

CSS UI Effects

Collection of creative text animations including typewriter, fade-in, and slide ...

View Project

Theme Settings

Color Scheme

Display Options

Font Size

Scroll Reveal Animations

Intersection Observer & Reveal

Project Structure & Files

Reveal Types & Stagger

Scroll UI & Parallax

Counters, Progress & Typewriter

What You Get

Usage

Project Features

Credits & Acknowledgments

Support & Contact

Featured Content

Additional Sponsored Content

Download Scroll Reveal Animations

Quick Links

Categories

Technologies

Featured Projects

Form Input Components

Search Filter Demo

CSS Neon Button Hover

Text Animation Effects

Flutter Login Screen UI