Divi Scroll Effects

Create advanced animations and transitions that react when you scroll up and down the page.

Goran Cajic avatar
Written by Goran Cajic
Updated over a week ago

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.

All Scroll Effects can be controlled by the scroll offset position. and defined by the transform options at the bottom of the viewport, in the middle of the viewport, and at the top of the viewport.

Combine effects and animate multiple elements

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.

Multiple effects can be enabled at once and the effects will be combined into a single, smooth animation that transitions beautifully as you scroll.


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

Full Control at each point during the animation

By controlling the starting, middle, and ending values, you control what the animation does, Divi takes care of the rest and will transition the element as it moves through the browser viewport:

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

Adjusting the animation timeline is as easy as adjusting the animation values - 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 the 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.

Did this answer your question?