Divi Scroll Effects

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 is 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.

It sounds complicated, but Divi makes it super easy!

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 and 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!

Vertical Motion

The vertical motion effect allows any element to move up and down the page based on the speed and direction that a visitor scrolls. The result is a parallax effect! Now anything can be used to create parallax effects with Divi. You can even combine vertical motion with parallax background images to build some really 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 that a visitor scrolls. You can even combine vertical and horizontal motion, giving you complete control over the movement of any element!

Blur

The blur effect will bring elements in and out of focus based on the speed and direction that a visitor scrolls. Since Divi allows you to control the starting, middle and ending blur value, you can bring elements into focus right when they are in front of the visitor’s eyes. It’s a great way to bring attention to important pieces of information.

Fade

The fade effect with fade elements in and out based on the speed and direction that a visitor scrolls. You can fade elements in, fade them out, or both. Combining fade, blur and scale can create some really sophisticated animations that add an extra “it” factor to your designs.

Scale

The scale effect will increase or decrease the size of any element based on the speed and direction that a visitor scrolls. If you want to bring attention to a particular element, such as a call to action, you can set the scale effect to increase the size of the element as it gets closer to the center of the viewport. Of course there are so many other possibilities too!

Rotation

The rotate effect with rotate an element in either direction based on the speed and direction that a visitor scrolls. Subtle rotation can really bring scenes to life. Just a little bit of rotation when combined with horizontal motion can look great! Or, let elements spin round and round.

One Click And That’s It!

Want to add a scroll effect to a module? One click will add the effect and it will look great too! To add a scroll effect, simply navigation to the new Scroll Effects option group within the Advanced tab of any module, row, column or section. Multiple effects can be enabled at once and the effects will be combined into a single, smooth animation that transitions beautifully as you scroll.

Want Full Control? You Got It!

Once you enable a scroll effect, you have full control over the magnitude of the effect at each point during the animation. By controlling the starting, middle and ending values, you control what the animation does. Once the values are set, Divi takes care of the rest and will transition the element as it moves through the browser viewport, thus creating an animation.

• Starting Value – The starting animation state that is used when the element enters the bottom of the browser viewport.
• Middle Value – The middle animation state that will be transitioned to as the element moves towards the middle of the viewport.
• Ending Value – The ending animation state that occurs as the element leaves the browser viewport at the top of the screen.

For example, an opacity effect with a starting value of 0 (invisible), a middle value of 100 (fully visible), and an ending value of 0 (invisible), will transition from an invisible state as it enters the viewport until it becomes 100% visible in the middle of the viewport, and then it will fade back out to an invisible state as it leaves the viewport.

Adjust The Animation Timeline

Not only can you adjust the animation values, you can also adjust the animation timeline. The timeline UI represents the height of the browser viewport. Each animation keyframe can be triggered at a different position within the viewport. This allows you to control when the animation starts, when it ends and timing of the middle animation value based on where the animated element exists within the browser viewport’s y axis.

• Starting Keyframe Position – This controls when the animation starts. If you want to delay the animation, drag the starting keyframe position inwards.
• Middle Keyframe Position – This controls the point at which the animation reaches its middle animation value. It doesn’t have to be exactly in the middle of the animation timeline. You can move the middle keyframe to any position within the viewport.
• Ending Keyframe Position – This control when the animation ends. If you want the animation to end before the element leaves the browser viewport, you can drag the ending keyframe position inwards.

Add Static States To Any Animation

You can also add pauses to your animations by increasing the duration of your static middle effect value. To create a static animation duration, click the two arrows when hovering over the middle keyframe. You can then 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 to transition towards its ending value.