Divi offers a hidden gem in the form of its Scroll Effects feature, allowing you to breathe life into your website with captivating animations. These Scroll Effects can be applied to any element within the Divi builder, from individual modules to entire rows or sections. You have a wide array of animation possibilities at your fingertips:

1. Vertical Motion: Create engaging vertical animations that respond to scrolling.
2. Horizontal Motion: Add dynamic horizontal motion to your content.
3. Fade: Control the fading in and out of elements for a subtle, elegant effect.
4. Scale: Enlarge or shrink elements to draw attention where it’s needed.
5. Rotation: Apply smooth rotations to create visually compelling dynamics.
6. Blur: Employ blur effects to add depth and intrigue to your content.

For each of these animation properties, you can set three values for up to four scrolled positions. This includes one starting position, two middle positions, and an ending position. Now, let’s delve into how you can infuse your content with simple but effective animations.

How to Create a Basic Animation Using Divi Scroll Effects

Let’s initiate a straightforward fade-in animation for a module:

1. Begin by opening the module settings.
2. Navigate to the Advanced tab.
3. Find the Scroll Effects section and click on it. You’ll notice six tabs, each governing one of the six appearance properties in relation to scroll position.
4. Hover over the tabs to reveal their names. Click on the third tab, labeled Fading In and Out.
5. Set Enable Fading In and Out to YES.
   
   

As you scroll down the page, you’ll witness the text gracefully fading in:

Tailor Your Scroll Effect

Now, it’s time to customize your animation further. You have the flexibility to define your values for Starting Opacity, Mid Opacity, and Ending Opacity. Want to create a fade-out animation? Simply set a value lower than 100% for Ending Opacity. Additionally, you can adjust the Viewport Bottom, Viewport Top, and the middle slider to precisely dictate where your animation initiates and concludes.

If you opt for three different values, you’ll notice that the element’s opacity changes continuously between the start and end points. To overcome this, add another keyframe by clicking the arrows within the middle sliders. This allows you to introduce a static portion to your animation. You can also fine-tune the viewport positions for these new keyframes by draging the handles.

The result is a noticeable transformation:

Unleash the Power of Combined Scroll Effects

Don’t stop at a single effect; you can combine multiple Scroll Effects for a single Divi element. In our example, we’ve added a Blur effect alongside the Fade effect:

As you can see, combining these effects elevates the visual impact:

Elevate Your Divi Skills

Divi Scroll Effects are a game-changer, capable of turning a lackluster website into a captivating masterpiece. By artfully merging various Scroll Effects and applying them to multiple Divi modules, you can create stunning websites and position yourself at the forefront of the Divi web design industry. For inspiration, explore some captivating examples of Scroll Effects by Elegant Themes here.