Add motion scroll effects to Divi (Feature update)

The latest Divi scroll animation update adds a really cool motion scroll effects feature which allows you to apply advanced animations and transitions based on how a user is scrolling up and down on the page.

Scroll down and a module can be animated around or into the screen.

Scroll back up and that same module is animated in reverse back around or off the screen.

If you have a client who wants a “little extra pop, … or something” then this is what you need.

What are Divi scroll animation effects?

Divi Scroll Effects are a new feature added in Divi version 3.1 and allow you to add highly customizable animations that are based on how a user scrolls up and down the page. The speed and direction of the scroll animation is based on the speed and direction the user is scrolling up and down the page.

Divi already has animation options that can be added to Divi sections, rows, and modules, but these are only activated once as a user scrolls down the page.

As you can see in the 3 image modules below, the animation effect is directly related to how the page is being scrolled up or down.

Scroll up and down to see the Divi scroll animation effects on these 3 image modules

There are 6 new motion scroll effects to choose from

You can animate any Divi section, row, or module with any combination of the 6 motion effects that are included in the motion effects option settings. Each motion effect than also has its own settings to control exactly how the animation works.

By combining effects you can create some stunning animation effects that will help bring any website to life.

The 6 scroll effect options include;

1. Vertical Motion scroll effect allows an element to move up and down the page based on the speed and direction the user scrolls up and down the page.
2. Horizontal Motion scroll effect allows an element to be moved left and right across the screen based on the speed and direction the user scrolls up and down the page.
3. Blur scroll effect allows an element to blur in and out of focus based on the speed and direction the user scrolls up and down the page.
4. Fade scroll effect allows an element to fade its opacity based on the speed and direction the user scrolls up and down the page.
5. Scale scroll effect allows an element to grow or shrink in size based on the speed and direction the user scrolls up and down the page.
6. Rotation scroll effect allows an element to rotate left or right based on the speed and direction the user scrolls up and down the page.

Control animations with scroll effect settings and options

Each of the 6 scroll effects comes with their own settings which allow you to control exactly how and when the effect takes place. You can control the start, mid and end effect levels along with the timeline of the effects full animation based on the height of the browser viewport.

Options for the animation levels allow you to specify the power of each effect at 3 different points based on where the user is scrolling on the screen.

• Starting Value sets the animation value as the module enters the bottom of the screen.
• Middle Value sets the animation value as the module is in the middle of the viewport.
• Ending Value sets the animation value as the module leaves the top of the screen.

Options for the animation timeline allow you to specify the duration and timing of each effect at 3 different points based on where the user is scrolling on the screen.

• The starting keyframe position sets the start point for the animation.
• The middle keyframe position sets the middle of the animation
• The ending keyframe position sets the end of the animation
• The midpoint keyframe can be split into 2 to allow the midpoint value to freeze the animation

How to add motion effects to a Divi module

Adding the motion effects to your Divi sections, rows and modules is very quick and easy. Just toggle on the effects you want to add and use the visual slider to control exactly how the effect functions.

Follow these steps to add Divi scroll animation to your Divi sections, rows or modules;

1. Open the settings window for your section, row or module and click on the “Advanced” tab
2. The “Scroll Effects” settings are at the bottom of this tab
3. There are 6 icons for each of the 6 scroll animation effects which can be selected and activated using the toggle for each icon
4. Once a scroll effect is activated using the toggle  the settings will be displayed as a slider that allows you to set the intensity and timing of the effect
5. Combine as many of the 6 effects as required

Final thoughts on Divi motion effects

This effect has been available from various plugins and other page builders and it has always been a popular effect that can be used to create some insanely creative animated websites. Having this feature built into Divi and having it also be so simple to implement adds a huge amount of creative freedom.

As the curator of amazing Divi websites on Divi Theme Examples, i’m really looking forward to seeing what the community will create with these new tools.

If you have used the new Divi motion effects options on your site, drop a link in the comments below and share your skills with the community.