Image Motion: Make a Photo or Artwork Move on Your Site

Any photo on your site can move: a hero slide, a section photo, a photo band, a card photo or a page hero. Motion is a setting on the image itself, so you add it wherever you already put a picture. It works on listing sites and group sites. An image with no motion looks exactly as it did before.

An image can also be a stack of layers: a back picture and one or more front pictures with see-through backgrounds, each moving on its own. That is how artwork like a globe with people walking past it comes alive: the globe turns while the people step.

When to use

You want a hero or section photo to feel alive without turning it into a video.
You have artwork or a logo-style cut-out (PNG or WebP with a transparent background) that should sit on the page with no card around it.
You want a photo to respond to the visitor: drift as they scroll, lift when they point at it, or lean toward the cursor.

Where to find it

Look for the small wind icon next to the reframe (crosshair) control on a photo.

Image	Where the motion button is
Hero slide (group site)	Group site editor → Layout tab → Home → right panel → Hero → Slides card → the wind icon on a photo slide's row
Hero slide (listing site)	Property editor → Layout tab → Home → right panel → Hero → Hero photos card → the wind icon on a photo slide's row
Section photo, photo band, carousel background, article, letter portrait, banner	Open the section in Page Content → the round wind button on the photo, beside the crosshair
Card photo (carousel photo tile, team portrait)	Open the section in Page Content → the round wind button on that card's photo
Page hero	Open the page → Hero → the wind icon in the hero photo's row

Motion is for photos. A video, a mosaic or an embedded tour has no motion button.

How to set it up

The first time you open it on an image, the studio walks you through two short steps.

Add the pictures you want to use. Your photo is already there. To build layered artwork, add cut-outs with Upload or Media Library, or drop a file on the box. Each picture becomes a layer. If the artwork should replace the photo, remove the photo from the list (you can put it back with Use the photo). Click Continue.
Describe how it should move. Write it in your own words, for example "the globe turns slowly as the cursor moves and the travelers walk past it", then click Set it up. The AI looks at your pictures and sets up the motion. Each setup is one AI writing action from your AI credits (1 credit at launch rates). Prefer to do it yourself? Click Set it up by hand.

Either way you land in the editor, with a live preview on the left. Nothing changes on your site until you click Save.

Tuning the motion

Motion — a row of named presets, each a live thumbnail of your own picture: Float, Drift, Lift on hover, Follow cursor, Parallax on scroll, Turn on scroll, and Walk past (layered art: the back layer turns, the front layers step past it). Walk past needs at least two pictures.
Subtle to Bold — one slider that scales the whole motion.
Ask for a change — describe a tweak ("make the front layer sway a little more") and the AI adjusts the motion and keeps the rest. Each request is one AI writing action.
Presentation — Framed keeps the photo cropped in its card. Free puts artwork with a see-through background straight on the page: fitted whole, with no card, crop, border or shadow box. On a card photo the card itself stays: Free fits the artwork whole on the card instead of cropping it to the photo slot.
Pictures — the layers, front on top. Drag to reorder, replace or remove each one, or add more (up to six).
Customize — the full controls for the picture you click:
- Placement: where the picture sits and how big it is. You can also drag it on the preview. Set pivot lets you click the point the picture turns around, for example the centre of a globe rather than the centre of the file.
- Shadow: on cut-outs the shadow follows the shape of the artwork; on a framed photo it is a soft shadow under the card.
- Triggers, in any mix: Always (a gentle loop), Scroll (moves as the visitor scrolls down and reverses on the way up, with a start and end point), Hover (eases to a state while pointed at) and Cursor (follows the pointer, with an optional 3D tilt, and settles back when it leaves). Each has its own amounts for move, rotate and scale. They add together, so a picture can float and lean toward the cursor at once.

Every amount has a limit, so nothing can be set to look broken.

What visitors see

A framed photo never shows an empty edge: it is enlarged by exactly what its motion needs, so its crop is slightly tighter than the still photo's.
Free artwork is never cropped or cut off, even while it turns.
Visitors who have reduce motion switched on see every image still.
On phones and tablets, Hover and Cursor are off (there is no pointer). Always and Scroll still play.
Motion only runs while the image is on screen, and the page first appears with the image at rest, so it does not slow your site down.
A layered image has one description for screen readers. Add or edit it in the studio if the default (the section or page title) does not describe the artwork.

What does not change

Emails, social share previews, print and site thumbnails keep using the still photo.
Replacing a section's photo keeps its motion. Remove it with Remove motion in the studio.
The built-in parallax on a photo band steps aside when you give that photo its own motion. Pick Parallax on scroll to keep a scroll effect.