scrolling animation effects

Today we have been informed of a new update on Divi which offers what is called scrolling animation effects. We took a look at it and in this tutorial, we will summarize what to expect.

What are the scrolling animation effects?

Scroll effects are customizable animations that react to your visitors as they scroll from top to bottom of the page. Unlike traditional animations, scrolling animation effects are directly related to your visitor’s scrolling behavior. The speed and direction of the animation are based on the speed and direction of the visitor’s scroll. The animation timeline is based on the position of the clip in the browser window.

scrolling animation effects

It seems complicated, but with Divi, it’s quite simplified

Any element can be animated using a combination of scale, rotation, horizontal and vertical movement, opacity, and blur effects. You control the magnitude of each effect at different points in the animation, then Divi takes care of the rest, creating beautiful transitions as those elements come in and move around your visitor’s view. Create simple animations that add subtle depth and sophistication, or combine effects and animate multiple elements to create spectacular blasts of activity that will wow your visitors!

6 new six unique effects

Effects available to choose from or in combinations. Divi comes with six different scroll effects, each of which can be individually customized using our new scroll effects user interface. You can also combine any of the effects to create more complex animations.

Vertical movement

The vertical motion effect allows any element to move up and down the page based on a visitor’s scrolling speed and direction. The result is a parallax effect! Now everything can be used to create parallax effects with Divi. You can even combine vertical movement with parallax background images to create some truly impressive designs

Horizontal movement

The horizontal movement effect is similar to the vertical movement effect, except that it allows items to be moved left to right on the screen depending on the direction and scrolling speed of a visitor. . You can even combine vertical and horizontal movement, giving you complete control over the movement of any element!

Contextual blur effect

The blur effect will bring elements in and out of focus depending on the speed and direction a visitor is scrolling. Since Divi allows you to control the start, middle, and end blur values, you can bring the elements into focus right when they are in front of the visitor’s eyes. It’s a great way to draw attention to important information.

Molten

The fade effect with elements fades in and out depending on the speed and direction of a visitor’s scroll. You can blend things in, make them disappear, or both. The combination of fade, blur, and scale can create some fancy animations that add an extra “it” factor to your designs.

Scaling effect

The scale effect will increase or decrease the size of any item depending on the speed and direction of a visitor’s scroll. If you want to draw 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 frame. window. Of course, there are also many other possibilities!

Rotation effect

The rotate effect rotates an item in either direction based on a visitor’s scrolling speed and direction. Subtle rotation can bring scenes to life. Just a little spinning, when combined with horizontal movement, can look great! Or let the elements go round in circles.

A new intuitive interface

The real beauty of Divi’s scrolling effects is their ease of use! There is a new user interface that simplifies the process of creating web animations so that they are accessible to everyone. With just one click, you can add or combine one of Divi’s six scrolling effects. Right out of the box, they will look great! Then you can fine-tune the effects to create even more advanced animations.

One-click and that’s it!

Want to add scrolling animation effects to a module? One-click will add the effect and it will look great too! To add a scroll effect, simply access the new Scroll Effects option group in the Advanced tab of any module, row, column, or a section. Multiple effects can be activated at the same time and the effects will be combined into one smooth animation that transforms beautifully as you scroll.

Want full control? you have it!

Once you’ve activated a scrolling effect, you have full control over the magnitude of the effect at each point in the animation. By controlling the start, middle, and end 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 around in the browser window, creating an animation.

  • Start value – The state of the start animation is used when the element enters at the bottom of the browser window.
  • Intermediate value – The intermediate animation state that will be transferred when the element moves to the middle of the window.
  • End Value – The end animation state that occurs when the item exits the browser window at the top of the screen.

For example, an opacity effect with a starting value of 0 (invisible), a median value of 100 (fully visible), and an ending value of 0 (invisible) will change from an invisible state when it enters. window until it becomes 100% visible in the middle of the window, then it will disappear in an invisible state when exiting the window.

Read more: How to create gradient background animation on Divi

Adjusting the animation timeline

Not only can you adjust the animation values, but you can also adjust the animation timeline. The timeline UI represents the height of the browser window. Each animation keyframe can be triggered at a different position in the window. This allows you to control the start, end, and timing of the animation based on the location of the animated clip in the y-axis of the browser window.

  • Start keyframe position – This option controls the start of the animation. If you want to delay the animation, drag the starting keyframe position inward.
  • Center Keyframe Position – This controls the point at which the animation reaches its center 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 in the window.
  • End Keyframe Position – This control ends the animation. If you want the animation to end before the clip exits the browser window, you can drag the end keyframe position inward.

Add static states to any animation

You can also add pauses to your animations by increasing the duration of your static mid-effect value. To create a static animation duration, click the two arrows when you hover over the middle keyframe. You can then extend the middle keyframe by dragging its edges back and forth. During this point in the animation, the element will remain static. After the static duration ends, the animation will continue to transition to its final value.

 

For website maintenance service contact us.

Leave a comment

echo "";