What the Client Needed
The goal: let users “control” the video timeline by scrolling. As they moved down the page, the video would scrub forward frame-by-frame—reversing if they scrolled back up. It needed to work seamlessly within Divi’s layout system and be reusable across multiple product pages.
Key Challenges Solved
- Divi’s section structure conflicted with animation layers
- Early tests caused choppy frame playback
- Video contained blank frames that disrupted flow
- Off-the-shelf plugin wasn’t customizable enough
- Frame rate and file size needed careful balancing
How We Built It
🎯 Custom Scroll Script
A JavaScript scroll listener updated the video’s currentTime based on how far the user had scrolled.
🎯 Frame Rate Tweaks
We tested 30fps, 60fps, and 90fps. Final videos ran at 60fps for smoothness without heavy load.
🎯 Video Editing Cleanup
Start and end frames were trimmed to eliminate white flashes or slow loading moments.
🎯 Divi Layout Optimization
We fine-tuned section spacing and layering to make sure the video played seamlessly within the builder.
Result
✅ Smooth, scroll-based video playback
✅ Works across pages and screen sizes
✅ No blank frames or jittery animation
✅ Easy to replicate for other products
Looking to add immersive video animation to your WordPress site?
Need help improving your WordPress forms or custom workflows? We build clean, reliable, and growth-driven WordPress solutions—without breaking a sweat.
Let’s TalkShare
.png)
