First 100 spots 50% lifetime discount. Start free.

ClickWhale

Animating elements as the visitor scrolls

ClickWhale can bring an element onto the page with a movement. A heading that fades up, a card that slides in from the left, as the visitor scrolls down to it.

Where	Animation in the Properties pane (the gear icon) of a selected element
Takes effect	After you publish (how)

It happens on scroll, and only once. The element stays invisible until roughly a tenth of it has come into view; then the animation plays, and it never plays again on that page. Scrolling back up and down does not repeat it.

Which elements can be animated

Four of them:

Element	Typical use
Section	The whole band arrives at once
Container	The content inside a section, without moving the background
Row	A row of columns, arriving together
Text content	A single heading or paragraph

Everything else (images, buttons, sliders) gets its animation from the container or row it sits in. Animating a whole row is almost always what you actually want, and it's less fiddly than animating its parts.

Choosing one

The dropdown starts with None and then offers about a hundred movements, grouped by family:

Family	What it looks like
Fade	Appears, optionally drifting from a direction. The safe default.
Slide	Moves in from an edge, no fading.
Zoom	Grows into place.
Bounce	Arrives with a springy overshoot.
Rotate, Flip, Light speed	Turns or spins into place. Emphatic.
Back	Comes in from a distance and settles.
Attention seekers, Bounce, Flash, Pulse, Shake, Tada, Wobble, Jello, Heart Beat	Doesn't arrive; the element is already there and draws attention to itself once.
Specials, Hinge, Jack In The Box, Roll In	Novelties. Hinge in particular is a joke, not a transition.

Fade In Up is the one to reach for if you're unsure. It's the movement people read as "polished" rather than as "animated".

Avoid the "Out" animations

Every family lists both directions. Fade In and Fade Out, Zoom In and Zoom Out, Bounce In and Bounce Out. The Out ones are exit animations: they end with the element invisible or off the screen, and it stays that way.

Because ClickWhale plays the animation once when the element scrolls into view, choosing an Out animation means the element appears, leaves, and never comes back. If something has vanished from your page, this is almost always why.

Rule: pick an animation with "In" in its name, or an attention seeker, which starts and ends in the normal state.

Tips

Not on the first thing a visitor sees. The top of the page should already be there when it loads. An animation there delays the one moment you can't afford to delay.
One kind per page. A page where every band fades up feels designed; a page where one slides, one spins and one bounces feels broken.
Not on anything essential. The element is invisible until the script brings it in, so an animation is a fragile place to put a phone number or a price.
Not on long text. Movement while someone is trying to read is genuinely unpleasant.
One value, not per screen size. Animation is a property, so unlike a display setting it can't be turned off just for phones. If a movement is wrong on mobile, it's usually wrong everywhere.

Visitors who have asked their device to reduce motion get the element without the movement. You don't have to set anything for this.

Common issues

There's no Animation setting on my element.

It's not one of the four. Select the row, container or section around it instead.

My element disappeared.

You picked an "Out" animation. Change it to the matching "In" one.

The animation doesn't play.

The element was already fully in view when the page loaded, so you missed it. Scroll up and reload. Note that it plays only once per page load.

It plays every time in the editor but not on the site.

The editor replays the movement whenever you change the setting so you can see what you picked. On the live site it plays once, on scroll.

It looks jerky on a phone.

Big movements over a large element are the expensive kind. A plain Fade In costs almost nothing and reads about the same.

What will you create today?

Start your website now!

ClickWhale is a website management system created by Ikabus