Pro

Hover, scroll and text effects for every block

Everything in the free plugin, plus WebGL hover and scroll effects, staggered groups, split text, click and class triggers, sequences, your own animation library and site-wide rules. The Shapes and Fade packs are included. Everything on this page is made with AnimateGL Pro: move the mouse, scroll and click to try it.

See pricing

Try the free version

Pro Hover effects

Follow the mouse

WebGL effects for images and CSS effects for anything else. Move your mouse over the tiles, then see all 22. Off for reduced motion.

Portrait lit by neon lights — WebGL `agl-hover-zoom`

Alley of red lanterns — WebGL `agl-hover-swap` with a second image

Tilt Free

Turns in 3D toward the mouse.

agl-hover-tilt

Grow Free

Scales up a little.

agl-hover-grow

Lift Free

Rises off the page.

agl-hover-lift

View all 22 hover effects

Pro Scroll effects

React to the speed of the scroll

While the page scrolls, images bend, bulge, split their colours or glitch with the scroll speed, and text leans. Stop scrolling and everything settles back. Scroll this section quickly.

Street of neon signs — `agl-scroll-wave`

Skew leans any element

with the scroll speed

agl-scroll-skew

View all scroll effects

Pro Animated backgrounds

A moving background behind any section

Six looks (Flow, Blobs, Waves, Aurora, Grain and Mesh) in your own three colours, on Group and Cover blocks, Elementor containers or any element with a class. They draw only while on screen, and as a still frame for visitors who prefer reduced motion.

Flow

A slowly warping gradient.

agl-bg-flow

Blobs

Soft shapes drifting past each other.

agl-bg-blobs

Waves

Bands of light rolling across.

agl-bg-waves

Aurora

Curtains of light rising in the dark.

agl-bg-aurora

Grain

A slow gradient with film grain.

agl-bg-grain

Mesh

Colours drifting into each other.

agl-bg-mesh

Pro Stagger

One setting, a whole sequence

Set a stagger on a group, columns, gallery, list or query loop, and each child plays the group’s animation a step after the one before.

HTML

<div class="agl agl-zoomInCSSUp agl-stagger-120">
  <div>…</div> <div>…</div> <div>…</div>
</div>

Neon

Lanterns

Street

Portrait

Signs

Alley

Pro Text split

Words and letters, one by one

Split a heading or paragraph into words or letters, each animated with its own delay. Screen readers still read the text once, as a whole.

HTML

<h2 class="agl agl-slideCSSUp agl-split-words">…</h2>
<h2 class="agl agl-fadeCSSDown agl-split-letters">…</h2>

Words

Every word makes an entrance

Letters

Letter by letter

Pro Triggers

Play on click, hover, or your own class

Animations don’t have to wait for scrolling. Start them from a button, a hover, or a class your theme or script adds.

Click another element

agl-trigger-click-reveal-btn

Surprise! Waited for the button

Hover the element

agl-trigger-hover

Plays on scrolling into view, then again on every hover.

When a class is added

agl-trigger-class-is-open

Plays when the class is added
Hides again when it’s removed
Works with stagger and split

Pro Loop animations

Keep moving, quietly

A small movement that repeats for as long as the block is on screen, after its entrance. It works with the scroll and hover effects, pauses off screen, and stays off for visitors who prefer reduced motion.

Pulse

Grows a little and back, slowly.

agl-loop-pulse

Float

Rises and sinks, slowly.

agl-loop-float

Wobble

Rocks from side to side.

agl-loop-wobble

Shake

Shakes sideways, then rests.

agl-loop-shake

Heartbeat

Two quick beats.

agl-loop-heartbeat

Swing

Swings from its top, like a sign. Tilts under the mouse too.

agl-loop-swing

Pro Shapes & Fade packs

31 more entrance animations

Clip-path reveals in squares, circles and lines, and WebGL fades from a circle, a corner or the image’s own light and dark parts. Click a direction to try it.

Pro And more

Control when, where and how often

Custom animation library

Design your own animation in the Animation Editor, save it, and pick it from any block like a built-in preset.

Per-device rules

Turn an animation off on mobile, tablet or desktop. The element shows without animation there.

Play once

Play an entrance once per browser session or once per visitor, then show the element right away.

Site-wide rules

Animate every image, heading or CSS selector across the site from one settings page, with opt-outs.

Get AnimateGL Pro

The WebGL hover and scroll effects, stagger, text split, triggers and the Shapes and Fade packs, from $49 a year.

See pricing

Try the free version