Join the waitlist

Animate images on scroll in WordPress

A picture can play one entrance as it arrives, follow the scroll forward and backward, or drift slowly inside its own frame.

Get Grinner free
See it live

Type

An upgrade to the Image block

Find it

Image settings, Entrance and Scroll effect

Phones

Runs the same, and never scrolls the page sideways

Speed

Scroll effects ride on the browser’s own scroll animation

Live demo

Pictures that arrive.

This is the real Image entrances and scroll effects setting, running on this page.

Image entrances and scroll effects example, a striped lighthouse on a cliff at night, its beam crossing the sky
Image entrances and scroll effects example, a harbor at sunrise with three sailing boats on orange water
Image entrances and scroll effects example, a winding cliff path through orange hills under a lilac sky

Settings    Entrance Settle     Scroll effect Expand to full     Parallax (scroll) speed 8

What you can change

The settings worth knowing.

Pick an entrance, a scroll effect or in-frame drift for each picture.

Image entrances and scroll effects example, a harbor at sunrise with three sailing boats on orange water

Entrance

A one-time entrance

Fade, Rise, Settle, Wipe, Soft blur, Slide or Roll, with your own duration and delay.

Image entrances and scroll effects example, a striped lighthouse on a cliff at night, its beam crossing the sky

Scroll effect

Tied to the scroll

Zoom, Tilt in, Grey to colour, Expand to full, Wipe in or Roll, finishing as the picture reaches mid-screen.

Parallax (scroll)

Drift inside the frame

The picture moves slowly inside its frame, up, down, left or right, at a speed from 2 to 20.

Image entrances and scroll effects example, a striped lighthouse on a cliff at night, its beam crossing the sky
Image entrances and scroll effects example, a round picture of Grinner rising through lilac and orange rings

Break out of frame

Spill past the edges

Parallax, Slide and Roll can move unclipped, passing over their neighbors.

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 picture

Pick an Image block, ideally one below the first screen.

3

Choose the motion

Set an Entrance or a Scroll effect, or switch on Parallax in the Hover panel, then publish.

Good to know

Fair questions.

They are a Grinner upgrade to the Image block. A picture can play one entrance as it arrives, follow the scroll forward and backward, or drift slowly inside its own frame. Use them to give important pictures a sense of arrival as people read down the page.

Yes. An image near the top, or in a Hero Mode section, is never hidden. Rise keeps only its movement and other entrances become a plain settle.

No. Each one plays once per page view.

Without scroll-driven animation the picture simply shows plainly, so nothing is lost.

No. A sticker motion rules out parallax and every scroll effect.

GrinBot -⁠ coming soon

Make your next site beautiful.

GrinBot designs and builds it for you. Join the waitlist for the launch price.

  • Studio-quality design
  • Built for speed
  • Pay once, no subscription

You’re on the list. We’ll email you when GrinBot launches.

Something went wrong. Please try again in a moment.

We’ll email you about the launch. Unsubscribe any time. Privacy policy

Or get the free Grinner plugin →

Pairs well with

Try it with these.

All images features

Section entrances

Sections fade, slide or zoom in, one after another.

Hero Mode and phone motion

Motion in your hero, with the first screen still drawn straight away.

Parallax

A section, or the things inside it, drifting at its own speed.

Grinner grinning

Go make something
beautiful.

Get Grinner free

Free on WordPress.org · No Pro version