Animate on Scroll - RSL Component API

Quick Start

Add scroll-triggered animations to any element using simple data attributes. The component uses IntersectionObserver for performant scroll detection and automatically respects user's reduced-motion preferences.

Automatic Initialization

The Animate on Scroll component automatically initializes on page load. Just include the CSS and JS files, then add data attributes to your elements.

<!-- Include required files -->
<link rel="stylesheet" href="styles/animations.css">
<script src="javascript/animate-on-scroll.js"></script>

<!-- Add animation to any element -->
<div data-animate="fade-in">
    This will fade in when scrolled into view
</div>

<!-- With custom delay and duration -->
<div
    data-animate="fade-from-left"
    data-animate-delay="200"
    data-animate-duration="800"
    data-animate-once="true">
    Custom animation timing
</div>

Data Attributes

Configure animations using HTML data attributes:

Attribute	Type	Default	Description
`data-animate`	string	required	Animation name to apply (see Available Animations below)
`data-animate-delay`	number	0	Delay before animation starts in milliseconds
`data-animate-duration`	number	500	Duration of the animation in milliseconds
`data-animate-once`	boolean	false	If "true", animate only once when element first enters viewport. If "false", re-animate each time element scrolls into view

Available Animations

Choose from these built-in animation effects:

Animation Name	Effect
`fade-in`	Simple fade in
`fade-from-top`	Fade in while sliding from top
`fade-from-bottom`	Fade in while sliding from bottom
`fade-from-left`	Fade in while sliding from left
`fade-from-right`	Fade in while sliding from right
`fade-zoom-in`	Fade in while scaling up from 0
`slide-in-right`	Slide in from the right edge
`fade-slide-up`	Fade in while sliding up slightly (50px)
`fade-slide-down`	Fade in while sliding down slightly (50px)
`spin-in`	Fade in while rotating 360 degrees
`expand-open`	Expand vertically from 0 height
`blink-in`	Blink effect (opacity flash)
`card-reveal`	Card-optimized animation: Subtle upward float (30px) with gentle scale (0.95→1.0) and blur-to-focus effect. Features elastic easing for a premium "settling into place" feel. Perfect for card grids and feature sections.

JavaScript API

Programmatically control animations using the RSL.AnimateOnScroll namespace:

Method	Parameters	Description
`RSL.AnimateOnScroll.init()`	none	Initialize all elements with data-animate attribute. Called automatically on page load.
`RSL.AnimateOnScroll.observe(element)`	HTMLElement	Start observing a specific element for scroll animations
`RSL.AnimateOnScroll.unobserve(element)`	HTMLElement	Stop observing an element
`RSL.AnimateOnScroll.reset()`	none	Reset all animations to their initial state

// Manually observe a dynamically created element
const newElement = document.createElement('div');
newElement.setAttribute('data-animate', 'fade-in');
newElement.textContent = 'Dynamic content';
document.body.appendChild(newElement);
RSL.AnimateOnScroll.observe(newElement);

// Stop observing an element
const element = document.querySelector('.my-element');
RSL.AnimateOnScroll.unobserve(element);

// Reset all animations (useful for testing)
RSL.AnimateOnScroll.reset();

Accessibility

Reduced Motion Support

The component automatically respects the prefers-reduced-motion media query. When users have reduced motion enabled in their system preferences, all animations are automatically disabled and elements appear immediately.

Features

Automatic Detection: Checks prefers-reduced-motion: reduce on initialization
Graceful Degradation: Elements appear immediately without animation when reduced motion is preferred
CSS Fallback: CSS media queries provide additional fallback in animations.css
Performance: Uses IntersectionObserver for efficient scroll detection with minimal impact on page performance

Best Practices

Don't animate critical content that users need to see immediately
Use data-animate-once="true" for important content to ensure it stays visible after first view
Keep animation durations reasonable (300-800ms recommended)
Test with reduced motion enabled to ensure content is still accessible

Browser Support

The Animate on Scroll component uses modern browser APIs:

IntersectionObserver: Supported in all modern browsers (Chrome 51+, Firefox 55+, Safari 12.1+, Edge 15+)
MutationObserver: For detecting dynamically added elements (supported in all modern browsers)
CSS Animations: Supported in all modern browsers

IE11 Note: IntersectionObserver is not supported in IE11. Consider using a polyfill if IE11 support is required.

Next Steps

See Examples

View examples.html for comprehensive demos

Try the Playground

Test features in playground.html

Explore Components

Browse all RSL components