Animate sections on scroll in WordPress

A section fades, rises, slides, blurs, grows, drops or swings in as it scrolls into view. Or it holds still while its cards arrive one after another.

Get Grinner free

See it live

Type

A setting on Group and Columns

Find it

Section settings, Entrance Animation

Phones

Plays unless the section’s phone motion is off

Speed

The code arrives only on pages that use an entrance

Live demo

Cards that arrive in turn.

This is the real Section entrances setting, running on this page.

Mon

Pottery

Tue

Choir

Wed

Life drawing

Thu

Salsa

Fri

Book club

Sat

Park run

Settings Reveal Scale Order Centre-out Easing Spring Repeat on re-entry on

What you can change

The settings worth knowing.

Pick a reveal, then decide how the children take turns.

Open today

Ten till four

Reveal

Ten entrances

Fade Up, Slide Up, Slide Down, Slide Left, Slide Right, Soft Blur, Scale, Fade, Drop and Swing.

1

2

3

4

Stagger children

One after another

The section stays still while its children enter in turn, forward, in reverse or center-out.

Aa

Smooth

Aa

Spring

Easing

How it feels

Smooth, Spring with a slight overshoot, Snappy or Linear.

Scroll up, then back down

Repeat on re-entry

Again and again

Replays the entrance every time the section comes back into view.

How to add it

Three steps. No new tool.

1

Install Grinner free

It’s on WordPress.org. Or go to Plugins, Add New, and search for Grinner Blocks.

2

Select a section

A Group or Columns, or the Group around your cards.

3

Choose the entrance

Pick a Reveal, turn on Stagger children for cards, set the timing, then publish.

Good to know

Fair questions.

Section entrances are a Grinner setting on Group and Columns. A section fades, rises, slides, blurs, grows, drops or swings in as it scrolls into view, or holds still while its cards arrive one after another. Use them to give a long page a gentle rhythm.

No. One entrance per section, either on the section or on its children.

They don’t fade, and they run 1.6 times the duration you set.

Not with Hero Mode on. It draws the section at once and keeps phones still.

Every section shows at once, in place.