Summary:
A client wanted to replicate Apple’s scroll-based video scrub animations on a Divi-based WordPress site. Freshy’s team designed a custom solution that syncs video playback with scroll position, achieving a high-end product animation effect with smooth transitions and responsive behavior.
Issue background
The project involved building a scroll-triggered video scrub interaction—where a user scrolls the page and a video advances or reverses frame-by-frame based on scroll position. The implementation needed to work site-wide across multiple pages and integrate cleanly within the Divi Builder.
Initial reference examples included Apple’s AirPods Pro and DJI’s Avata 2 pages, both of which use advanced scroll-linked animations to highlight product features.
Diagnosis
Key challenges identified:
- Divi’s layout system occasionally interfered with custom scroll effects.
- Early versions of the scroll interaction produced choppy playback.
- The start and end of the videos contained white blank frames, making the animation appear clunky or delayed.
- Testing different video speeds (30fps, 60fps, 90fps) impacted the smoothness of playback.
A working prototype had already been attempted using a free plugin (“Supreme Modules Lite – Divi Theme, Extra Theme and Divi Builder”), but limitations required a more tailored approach.
Resolution steps
- Custom JavaScript integration
A scroll listener script was added that linked scroll progress to the currentTime of the video element. This allowed for real-time frame syncing as the user scrolled. - Video optimization
Several versions of the video were created with varying frame rates. Higher frame rates (60fps+) resulted in smoother scrubbing. Final tests confirmed that 60fps offered the best compromise between quality and file size. - Divi layout adjustments
White space below the video was reduced by modifying Divi section padding. Builder settings were manually tweaked to avoid layering conflicts. - Frame cleanup
Blank frames at the start and end of each video were trimmed during editing to eliminate loading delays and improve animation fluidity. - Cross-page readiness
The setup was modularized so it could be reused across multiple pages, including templates for product categories like mobile substations.
Final outcome
Freshy successfully delivered a custom scroll-scrub video animation experience that closely mimicked the look and feel of high-end product pages. With optimized video encoding and custom JS behavior, the animations performed smoothly across screen sizes. The client now has an interactive visual storytelling feature that elevates the site’s UX and branding.
Want to implement advanced animations in WordPress? Contact Freshy — we’ll help bring your product pages to life with scroll-triggered effects and immersive design.
