Divi Scroll Effects can create animations and transitions that trigger as visitors scroll up and down the page.
No complicated CSS or JavaScript is needed. With Divi Scroll Effects, creating the stunning transitions and animations your website needs is easy.
What Are Scroll Effects?
Scroll Effects are customizable animations that react to your visitors as they scroll up and down the page. Unlike traditional animations, scroll effects are tied directly to your visitor's scrolling behavior.
The speed and direction of the animation are based on how fast and in which direction the visitor is scrolling.
The animation timeline is based on the element's position within the browser viewport. Any element can be animated using a combination of scale, rotation, horizontal and vertical motion, opacity, and blur effects.
You control the magnitude of each effect at different points during the animation. Then Divi takes care of the rest, creating beautiful transitions as those elements enter and move through your visitor's view.
Create simple animations that add subtle depth and sophistication, or combine effects and animate multiple elements to create spectacular explosions of activity that will blow your visitors away!
Where To Find Divi Scroll Effects
Scroll Effects are available in all Sections, Rows, Columns, and Modules.
Open the element's Settings modal window you're working on
Go to Advanced Tab → Scroll Effects
All Scroll Effects Options Explained
To apply a scroll effect, navigate to the one you want and click the Enable toggle to yes, triggering the scroll effect controls where you can minutely adjust each scroll effect.
Sticky Position
Choose to have the element remain a fixed distance from the top or bottom edge of the browser window as the user scrolls.
Click the dropdown menu.
Select any of the following options:
Do Not Stick - The elements are not going to be sticky
Stick to Top - The element will be sticky once it reaches the top of the browser window
Stick to Bottom - The element will be sticky once it reaches the bottom of the browser window
Stick to The Top and Bottom - The element will be sticky between the top and bottom of the browser window.
Scroll Transform Effects
This is where you can choose from the 6 scroll effect animations. The animation's transition is based on the user's scrolling behavior. Once the element enters the browser viewport, the animation will begin, and once it leaves the viewport, the animation ends.
Vertical Motion
The vertical motion effect allows any element to move up and down the page based on the speed and direction a visitor scrolls. The result is a parallax effect!
Now, anything can be used to create parallax effects with Divi. You can combine vertical motion with parallax background images to build awesome designs.
Horizontal Motion
The horizontal motion effect is just like the vertical motion effect, except it allows elements to be moved left and right across the screen based on the direction and speed a visitor scrolls. You can even combine vertical and horizontal motion, giving you complete control over the movement of any element!
Fading In and Out
The fade effect is a visual element that appears when a website visitor scrolls. The speed and direction of the scroll determine when elements fade in or out. You can use this effect to fade elements in, fade them out, or both. When combined with blur and scale, it creates sophisticated animations that add an extra touch of style to your designs.
Scaling Up and Down
The scale effect can change the size of an element depending on the direction and speed of a visitor's scrolling. For instance, if you want to draw attention to a specific element, such as a call-to-action, you can use the scale effect to increase its size as it gets closer to the center of the viewport. The possibilities of using the scale effect are vast, and many creative ways exist.
Rotating
The rotate effect allows an element to be rotated in either direction based on the speed and direction of a visitor's scrolling. This subtle rotation can enhance the visual experience and bring scenes to life. A slight rotation combined with horizontal motion can create a great effect. Alternatively, elements can be made to spin continuously.
Blur
Divi's blur effect is a powerful tool that dynamically adjusts the focus of website elements based on the speed and direction of a visitor's scroll. With complete control over the starting, middle, and ending blur values, you can ensure that important information is brought into focus at the perfect moment. Use this feature to draw attention to key pieces of content and create a more engaging user experience.
Scroll Effect Controls
These Scroll Effect Controls offer precise control over effect timing and duration.
Viewport Bottom - This controls when the animation starts. To delay the effect, increase the value of the Viewport Bottom.
Viewport Middle - The center circle controls the Viewport Middle. This setting allows you to increase or decrease the timeline of both the viewport's top and bottom.
Viewport Top - This controls when the animation ends and then starts upon a reverse scroll. Drag the range slider or input a numerical value to increase or decrease the animation endpoint.
Enable Vertical Motion - Toggle this option to yes to enable vertical motion. This will make the element move faster or slower than the elements around it as the viewer scrolls through the page. You can adjust this with the following options.
Starting Offset - This setting determines the element's state when it enters the bottom of the browser viewport.
Mid Offset - This defines how much the element will offset when it reaches the middle of the viewport.
Ending Offset - Define whether the element should be visible or hidden when the element leaves the browser viewport.
Tips and Best Practices For Using Divi Scroll Effects
When using Divi Scroll effects, remember these tips and best practices.
Using Scroll Effects To Highlight Important Content
Scroll Effects can emphasize important content on a website, guiding visitors through the content and highlighting essential information.
Using Multiple Scroll Effects, But Not Too Many
You can use multiple scroll effects to create an engaging website design. However, too many effects can be confusing and distracting.
Create Static Animations
If you want to add pauses to your animations, you can increase the duration of your static middle effect value. To create a static animation duration, click the two arrows when hovering over the middle keyframe. Then, you can extend the middle keyframe by dragging its edges in either direction. During this point of the animation, the element will remain static. Once the static duration ends, the animation will continue transitioning towards its ending value.