How to Use the Animation On Scroll In Web Design

The Animation On Scroll is the basic effect used on loading and scrolling web pages. You can add it by selecting an Element, and then going to the Property Panel. Click on the On Scroll Tab and check the Animation checkbox. Select a Preset and customize the On Scroll Effect if needed. Preview to see the Animation on Scroll Effect.
On-Scroll Animation

Browse By Feature Categories

Fade Effect

The Fade effect is a stylistic transition in which an element, like an image, text, or background, gradually disappears and appears back on the web page.

Slide Effect

Add the Effect if you want your element to move gradually from one point to another in a particular direction on page loading or scrolling.

Zoom Effect

The Zoom Effect is the transition of gradual appearance while changing the size of an Element. It allows to close up an Element on web page loading or scrolling.

Flip Effect

Apply the Flip effect to implement the semi-rotation of an Element, whereby you can see both the front and back sides of the current Element. You can choose the flip pole either by the X-Axis or Y-Axis.

Bounce Effect

Use the Bounce Animation effect to make the Element moving down, up, and quickly down again on page scrolling.

Rotate Effect

The Rotate Effect defines a transformation that rotates an element around a fixed point on the page without the deformation.

Box Effect

The Box, or Jack In The Box, Creates a transition effect imitating a popular joke toy movement. It starts with the central fading in and continues with shaking from one side to another.

Flash Effect

Flash Animation, also associated with blinking, is also popular to attract visitor's attention. It appears like series of fade-in and fade-out transitions with the accent on the opaque state of the animated object or text.

Hinge Effect

With the Hinge Effect, an Element turns over or causes to turn over with a sudden quick movement stopping at the point of an imaginable hinge. This natural transition can add surprise to the interaction in your web design.