Animate On Scroll

The Animate On Scroll feature allows you to apply an entrance/exit animation to elements so that they appear as you scroll (navigate) down/up the page.

  • Select a block.

  • Open the Advanced tab.

  • Open the Scrolling tab.

  • Open the Animate on Scroll tab.

Type

The Type property defines the choice of animation you want to appear as you scroll, such as fade, scale, puff, flicker and variations.

  • Select required Animate on Scroll Type (Click animation or select in dropdown).

Start Anchor

The Anchor property defines the position on the page where the Scroll Animation will come into effect, such as top, centre, bottom.

  • Select required Anchor in the dropdown.

Easing

The Easing property affects the way the animation is played. It controls how animations transition between their start and end values and lets you apply different kinds of easing timing to the animation when triggered into view, such as linear (default), ease-in, ease-out, etc.

  • Select required type of Easing in the dropdown.

Duration

The Duration property lets you set how long the animation lasts, with values from 0 to 3000, in steps of 50ms.

  • Set required duration.

Delay

Delay lets you set the time before the animation appears, with values from 0 to 3000, in steps of 50ms.

  • Set required delay.

Animate Once

The Animate Once property lets you set whether the animation should happen only once while scrolling down. It can be Toggled on and off.

  • Toggle as required.

Last updated