Scroll Animation Framework

A modern, performance-focused, and flexible JavaScript framework for implementing scroll-based animations in web pages with seamless integration with the popular Animate.css library.

✨ Core Features

Animate.css Integration: Full compatibility with the popular Animate.css library
Intersection Observer API: Modern and performant scroll detection
Automatic Element Detection: Smart element detection based on CSS classes
Stagger Animations: Sequential animations for elements within containers
Accessibility Support: Automatic adaptation to reduced motion preferences
Performance Monitoring: Real-time performance metrics
Debug Mode: Detailed logging to facilitate development process (CTRL + D)

Download

Github

🚀 Installation and Getting Started

Requirements

1. Include Animate.css library on your page:

CDN

Local

2. Include the framework file:

Auto-initialization

The framework starts automatically by default. To disable:

Manual Initialization

const scrollAnimator = new ScrollAnimationFramework ({
debug: true,
defaultAnimation: 'fadeInUp',
staggerDelay: 200
});

📖 Usage Methods

Data Attribute Method

<!-- Simple animation -->
                                    <div data-scroll-animate="fadeInUp">Hello World!</div>

                                    <!-- With detailed settings -->
                                    <div data-scroll-animate="bounceIn"
                                        data-scroll-duration="1.5s"
                                        data-scroll-delay="200">
                                             Detailed Animation
                                    </div>

                                    <!-- With all settings -->
                                    <div data-scroll-animate="slideInLeft"
                                    data-scroll-duration="2s"
                                    data-scroll-delay="500"
                                    data-scroll-callback="myCallback">
                                         Fully Controlled Animation
                                    </div>

Multiple Elements Usage (Container)

<!-- Multiple animations with container -->
                                    <div data-scroll-container
                                    data-scroll-animate="fadeInUp"
                                    data-scroll-stagger="200">
                                         <div class="item">Element 1</div>
                                         <div class="item">Element 2</div>
                                         <div class="item">Element 3</div>
                                         <div class="item">Element 4</div>
                                    </div>

                                    <!-- With different animations -->
                                    <div data-scroll-container
                                    data-scroll-animate="bounceIn"
                                    data-scroll-duration="1.2s"
                                    data-scroll-stagger="150">
                                         <div class="card">Card 1</div>
                                         <div class="card">Card 2</div>
                                         <div class="card">Card 3</div>
                                    </div>

Class-Based Auto Detection

<div class="card">This gets automatic slide-up animation</div>

                                    <div class="hero-title">This gets automatic fade animation</div>

                                    <div class="feature-box">This gets automatic slide-left animation</div>

                                    <button class="button">This gets automatic bounce animation</button>

Programmatic Usage with JavaScript

// Adding element
                                    scrollAnimator.addElement(document.querySelector('#myElement'), {
                                             animation: 'zoomIn',
                                             duration: '1.5s',
                                             delay: 300
                                    });

                                    // Triggering animation
                                    scrollAnimator.triggerAnimation('.my-selector', {
                                             animation: 'pulse',
                                             duration: '2s'
                                    });

                                    // Resetting all animations
                                    scrollAnimator.resetAllAnimations();

                                    // Updating configuration
                                    scrollAnimator.updateConfig({
                                             defaultAnimation: 'slideInRight',
                                             staggerDelay: 200
                                    });

Advanced Usage Examples

<!-- With callback function -->
                                    <div data-scroll-animate="jackInTheBox"
                                    data-scroll-callback="elementAnimated">
                                         Element with Callback
                                    </div>

                                    <!-- With different threshold -->
                                    <div data-scroll-animate="rotateIn"
                                    data-scroll-threshold="0.8">
                                         Late Triggered Element
                                    </div>

                                    <!-- Combination example -->
                                    <section data-scroll-container data-scroll-animate="fadeInUp" data-scroll-stagger="100">
                                         <h2 data-scroll-animate="slideInDown" data-scroll-delay="0">Title</h2>
                                         <p data-scroll-animate="fadeIn" data-scroll-delay="200">Description</p>
                                         <div class="cards">
                                                  <div class="card">Card 1</div>
                                                  <div class="card">Card 2</div>
                                                  <div class="card">Card 3</div>
                                         </div>
                                    </section>

Configuration Options

// Framework initialization
                                    const scrollAnimator = new ScrollAnimationFramework({
                                                 // Basic settings
                                                 defaultAnimation: 'fadeInUp',
                                                 defaultDuration: '1s',
                                                 staggerDelay: 150,
                                        
                                                 // Debug
                                                 debug: true,
                                                 performanceMonitor: true,
                                        
                                        // Callbacks
                                        onElementAnimated: (element, config) => {
                                                 console.log('Element animation completed:', element);
                                        },
                                        onAllAnimationsComplete: () => {
                                                 console.log('All animations completed!');
                                        }
                                    });

Event Listeners

// When element animation completes
                                    document.addEventListener('scrollAnimationComplete', (event) => {
                                             const { element, config } = event.detail;
                                             console.log('Animation completed:', element);
                                    });

                                    // Custom callback function
                                    window.myCallback = function(element) {
                                             console.log('Custom callback executed:', element);
                                             // Additional operations...
                                    };

💡 Tips

Performance: Use data-scroll-container for multiple elements
Accessibility: Framework automatically supports prefers-reduced-motion
Debug: Use debug: true during development
Stagger: Use stagger effects for multiple elements to add visual richness
Duration: Use 0.3-0.8s for fast animations, 1-2s for dramatic effects

📋 Animation Categories and List

🎯 Attention Seekers

bounce
flash
pulse
rubberBand
shakeX
shakeY
headShake
swing
tada
wobble
jello
heartBeat

⬅️ Back Entrances

backInDown
backInLeft
backInRight
backInUp

➡️ Back Exits

backOutDown
backOutLeft
backOutRight
backOutUp

🏀 Bouncing Entrances

bounceIn
bounceInDown
bounceInLeft
bounceInRight
bounceInUp

🏀 Bouncing Exits

bounceOut
bounceOutDown
bounceOutLeft
bounceOutRight
bounceOutUp

🌫️ Fading Entrances

fadeIn
fadeInDown
fadeInDownBig
fadeInLeft
fadeInLeftBig
fadeInRight
fadeInRightBig
fadeInUp
fadeInUpBig
fadeInTopLeft
fadeInTopRight
fadeInBottomLeft
fadeInBottomRight

🌫️ Fading Exits

fadeOut
fadeOutDown
fadeOutDownBig
fadeOutLeft
fadeOutLeftBig
fadeOutRight
fadeOutRightBig
fadeOutUp
fadeOutUpBig
fadeOutTopLeft
fadeOutTopRight
fadeOutBottomRight
fadeOutBottomLeft

🔄 Flippers

flip
flipInX
flipInY
flipOutX
flipOutY

⚡ Lightspeed

lightSpeedInRight
lightSpeedInLeft
lightSpeedOutRight
lightSpeedOutLeft

🔄 Rotating Entrances

rotateIn
rotateInDownLeft
rotateInDownRight
rotateInUpLeft
rotateInUpRight

🔄 Rotating Exits

rotateOut
rotateOutDownLeft
rotateOutDownRight
rotateOutUpLeft
rotateOutUpRight

📐 Sliding Entrances

slideInDown
slideInLeft
slideInRight
slideInUp

📐 Sliding Exits

slideOutDown
slideOutLeft
slideOutRight
slideOutUp

📐 Sliding Entrances

slideInDown
slideInLeft
slideInRight
slideInUp

📐 Sliding Exits

slideOutDown
slideOutLeft
slideOutRight
slideOutUp

🔍 Zooming Entrances

zoomIn
zoomInDown
zoomInLeft
zoomInRight
zoomInUp

🔍 Zooming Exits

zoomOut
zoomOutDown
zoomOutLeft
zoomOutRight
zoomOutUp

⭐ Special Animations

hinge
jackInTheBox
rollIn
rollOut

🎯 Common Shortcuts

fade
slide-up
slide-down
slide-left
slide-right
zoom
elastic
attention
jack

📋 Examples

Performance

Use data-scroll-container for multiple elements

Accessibility

Framework automatically supports prefers-reduced-motion

Debug

Use debug: true during development

Stagger

Use stagger effects for multiple elements to add visual richness