Scroll effects

This feature is in AnimateGL Pro. See AnimateGL Pro.

A scroll effect moves an element with the scroll speed while the page scrolls. It starts after the entrance has played, and the element settles when scrolling stops.

Add a scroll effect

In the block editor, open the Scroll and hover effects group in the AnimateGL panel and pick an effect in While scrolling. In Elementor, use While scrolling in the AnimateGL section.

Effects

• Skew: the element leans with the scroll speed. It works on any block, with or without an animation.
• Bend (WebGL): the image bends.
• Wave (WebGL): the image bulges.
• RGB shift (WebGL): the image splits its colours.

The WebGL effects are for images with a WebGL animation set on the block, not the site default. If you change the block to a CSS animation later, the panel warns you that the effect does nothing there.

When effects don’t run

• While an entrance plays, and before a staggered group’s last part has played.
• Where the animation is off for the device.
• For visitors who prefer reduced motion.

Classes

agl-scroll-skew, agl-scroll-bend, agl-scroll-wave and agl-scroll-rgb. The WebGL ones need an element with a WebGL animation, for example:

agl agl-fadeUp agl-scroll-bend

Example

Scroll the page to see this paragraph lean.