On Scroll Animation Content

< All Topics

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

General Steps

The On Scroll Content Animation option can be seen inside the Style Tab at the very bottom. To set the animation effect for your image or a content element, choose any one effect from the dropdown.

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.

Animation Delay

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)

Animation Duration

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)

In Animation Effect options for On Scroll Animation Content

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.

Out Animation Delay

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)

Out Animation Duration

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)

Out Animation Effect options for On Scroll Animation Content
Do you want to rate this article?
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?
Need help?