Introducing Scrubber: Smooth Scroll-Scrub Video for WordPress
Scrubber is a lightweight WordPress plugin that transforms your Cover block videos into smooth, scroll-synchronized experiences. Instead of traditional video playback, your videos now scrub frame-by-frame as users scroll through your content.
Scrubber is now available as a WordPress plugin. Simply install, activate, and start creating scroll-synchronized video experiences that will captivate your users!
🎬 How It Works
Scrubber adds a simple toggle to your WordPress Cover blocks. When enabled on a block with a video background, the plugin:
- Pauses the video and takes control of playback
- Synchronizes video time with scroll position using GSAP ScrollTrigger
- Scrubs smoothly from start to finish as users scroll through the element
✨ Key Features
- One-Click Setup: Simple toggle in the Cover block inspector
- Smart Detection: Only appears when you have a video background
- Pixel-Perfect Control: Set exactly when scrubbing begins (e.g., 300px from top)
- Smooth Performance: Advanced requestAnimationFrame optimization prevents frame-skipping
- Lightweight: Uses GSAP CDN with local fallbacks – no bloat
🎯 Perfect Use Cases
- Hero sections: Let users see your video content as they scroll
- Product demos: Show features frame-by-frame with user control
- Storytelling: Create immersive narrative experiences
- Portfolio pieces: Showcase work with scroll-driven reveals
🛠️ How to Use
- Add a Cover block to your page
- Set a video as the background
- In the block settings, enable “Scroll-scrub background video”
- Optionally set “Scrub start (pixels from top)” to control when scrubbing begins
- Publish and watch your video scrub smoothly with scroll!
🔧 Technical Details
Scrubber uses GSAP ScrollTrigger for buttery-smooth performance and includes:
- RequestAnimationFrame throttling to prevent frame-skipping
- Smart video preloading for instant responsiveness
- Muted audio to prevent playback conflicts
- Bounds checking to ensure stable performance