What the Client Needed
The goal: let users “control” the video timeline by scrolling. As the user scrolls 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. We used Divi theme and Divi builder to create immersive, scroll-based animations that worked across all responsive layouts on the WordPress site. Using scroll triggers to custom GSAP stuff allowed synchronization with currentTime for smooth video playback.
Key Challenges Solved
Divi’s section structure conflicted with animation layers
Early tests caused choppy frame playback and browser viewport issues
- Video contained blank frames that disrupted flow
- Off-the-shelf plugin or WordPress plugin wasn’t customizable
- enough for scroll-triggered video or scroll image animation
- Frame rate and file size needed careful balancing for performant playback
- We optimized video encoding and trimmed start and end frames for smooth video experiences
How We Built It
Custom Scroll Script
A JavaScript scroll listener updated the video’s currentTime based on scroll position as the user scrolls, enabling scroll-based animations and scrolly telling content from Lottie files to video experiences.
Frame Rate Tweaks
We tested 30fps, 60fps, and 90fps. Final videos ran at 60fps for smooth video without heavy load, ensuring elegant themes and Divi websites supported smooth UX and better user experience.
Video Editing Cleanup
Start and end frames were trimmed to eliminate white flashes, slow loading moments, or blank frames that could affect page load.
Divi Layout Optimization
We fine-tuned section spacing, Divi timeline, image module, background image, and layering within the Divi builder to make sure the video played seamlessly. Custom code and CSS adjustments helped synchronize animations in Divi, parallax effects, and scroll animations for multiple product pages.
Result
✅ Smooth, scroll-based video playback
✅ Works across pages, screen sizes, and viewports
✅ No blank frames or jittery animation
✅ Easy to replicate for other products and landing page designs ✅ Using scroll, triggers, and keyframe animations made the animation immersive and performant
Looking to add immersive video animation or scrolly telling content to your WordPress site? Learn how to create synchronized scroll-based animations from Lottie files to custom Divi video experiences using scroll triggers.
Frequently Asked Questions (Scroll-Synced Video Animations in Divi with JavaScript)
How do you scroll effects in Divi?
In Divi, scroll effects are added via the Module, Row, or Section settings. Go to Design → Scroll Effects, then choose from options like Vertical, Horizontal, Fade, or Zoom. Adjust speed, direction, and offset to create dynamic motion as users scroll, enhancing visual engagement.
How to use animate on scroll Library?
To use the Animate On Scroll (AOS) library, include its CSS and JS files in your project. Add data-aos="animation-name" attributes to HTML elements, then initialize with AOS.init() in JavaScript. Customize duration, delay, and easing using additional data-aos-* attributes for scroll-triggered animations.
How to create a scroll animation in Canva?
In Canva, create scroll animations using the Animate feature. Select an element or page, click Animate, and choose effects like Rise, Pan, or Fade. Adjust speed and direction if available. Preview the animation, then download as MP4 or GIF to preserve scroll-like motion.
How to create an animated scroll to top button with JavaScript?
To create an animated scroll-to-top button in JavaScript, add a button in HTML, style it with CSS, and use window.scrollTo({ top: 0, behavior: 'smooth' }) in a click event listener. Optionally, show the button only after scrolling down for better UX.