Step Grid
One photo steps back into a grid of sliding rows.
A Pro component: the live demo and the code come with Pro.
Settings
Pro- focusScale
- rows
- interval
- stepDuration
- gap
What it does
Step Grid is an image animation ready for your AI assistant, React or plain JavaScript, with no dependencies. Also called scale-in grid, stepping card grid or grid loop showcase.
A single photo shrinks back to reveal the grid around it, then the rows slide sideways one card at a time before the photo grows to fill the frame again. It loops on its own and pauses off screen.
With Pro
The AI prompt, the React component, the plain JavaScript file and the embed come with Pro, along with the live demo. Every setting is optional: with none, you get the effect as the preview shows it.