On Scroll Animation Content

On Scroll Animation Content

On Scroll Content Animation is used to set awesome animation effects to your images or to any other elements upon load. By using these animation effects, it makes your website look very lively and interactive.

Pro tip
Don’t go too fancy over the animation effects. I know they can be tempting but lesser the better. Try to use subtle effects which adds more value and interactivity to your website.

Using On Scroll Content Animation

Initially, all the animation options are disabled. You have to select the animation effect from the dropdown to see more options. Follow the steps as described below:

Table Of Contents

Setting Up

You don’t need to add a block separately to use this feature. You just need to select the block you want to Open the Advanced Tab then scroll down to the On Scroll Animation and then select animation as shown in the video below. (You can use it similarly for all other blocks.)

Choose In Animation Effect

Select your preferred In Animation Effect from the dropdown. After selecting the effect, you will see some more options below it. Let’s understand them further.

Direction

Select the direction for your animation.

Duration

Select the duration for your animation.

Custom Duration (s)

It simply means the amount of time taken to complete the entire animation effect. Slide the button to Yes to enable it. Use the slider to set the speed duration of your animation in milliseconds. (Recommended Value – 1000)

Animation Delay (s)

Set out animation delay (time) for your image. It means after how much time your effect should be applied to the image. The applied effect can be seen only when you scroll to that specific image. (Recommended Value – 300)

Easing

It is a transition type you can select your type using the dropdown.

Choose Out Animation Effect

Select your preferred Out Animation Effect from the dropdown. After selecting the effect, you will see some more options below it. Let’s understand them further.

Direction

Select the direction for your animation.

Duration

Select the duration for your animation.

Custom Duration (s)

It simply means the amount of time taken to complete the entire animation effect. Slide the button to Yes to enable it. Use the slider to set the speed duration of your animation in milliseconds. (Recommended Value – 1000)

Animation Delay (s)

Set animation delay (time) for your image. It means after how much time your effect should be applied to the image. The applied effect can be seen only when you scroll to that specific image. (Recommended Value – 300)

Easing

It is a transition type you can select your type using the dropdown.

Was this article helpful?
0 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Please submit the reason for your vote so that we can improve the article.