Adding scroll effects is a great idea to impress your site visitors. If you have a WordPress-based website built with Divi Builder, you don’t need to install any additional plugin anymore as Divi Builder comes with a built-in feature to add scroll effects. Instead of one, there are 6 scroll effect types offered by Divi Builder. This article will show you how to add scroll effects in Divi Builder.
Before we take a step further, let’s start with a brief intro about scroll effects. What is a scroll effect?
A scroll effect is the type of animation that occurs when a visitor scrolls down or up the page on your website. In this context, the animation timeline is based on the object’s position within the browser viewport. When adding a scroll effect in Divi Builder, you can control the viewport. While the speed is based on how fast a user scrolls the page as well as the magnitude of the effect.
How to add scroll effects in Divi Builder
Divi Builder offers three element types that you can use to design your page: section, row, and module. You can add scroll effects to these three elements. There are 6 scroll effect types offered by Divi Builder. You can use one effect or combine two or three — or even six at once — scroll effects to create a stunning animation effect to an element.
To add scroll effects, first, open the settings panel by clicking the gear icon on the element handle (blue for section, green for row, and grey for module).
On the setting panels, go to the Advanced tab and open the Scroll Effects block. On the Scroll Transform Effects section, select the scroll effect type you want to add and toggle the Enable Vertical Motion switch.
After toggling the Enable Vertical Motion switch, you can set the top viewport and bottom viewport. You can also set the motion effect trigger.
What is viewport by the way? Viewport is user’s visible area on the web browser.
Scroll effect types offered by Divi Builder
As said earlier above, there are 6 scroll effect types offered by Divi Builder:
1. Vertical Motion
This scroll effect option moves the object/element vertically.
2. Horizontal
This scroll effect option moves the object/element horizontally.
3. Fading In and Out
This scroll effect adds fading and fading movement to the object/element.
4. Scaling Up and Down
This option adds scaling up and scaling down effect to the object/element.
5. Rotating
This option adds rotating effect to the object/element.
6. Blur
This option adds blur effect to the object/element.