Link to component page:
Introduction
The Scroll Animation with Grid (Motion) component creates a stunning scroll-driven reveal effect where a fullscreen hero image shrinks into a grid cell while surrounding image tiles scale and fade in from the center outward. The result is a cinematic transition from a single featured image to a complete 5-column x 3-row image grid — all driven by the user’s scroll position.
The component uses Framer Motion’s
useScroll and useTransform hooks to map scroll progress to CSS transforms and opacity values. Three animation layers reveal sequentially with staggered timing and custom cubic-bezier easing curves, giving the effect depth and a polished feel. On mobile (< 600px) the grid automatically collapses to 3 columns, hiding the outermost layer for a cleaner layout.The animation respects the
prefers-reduced-motion media query — when enabled, all images are displayed statically without animation.How to setup
Setting up the Scroll Animation with Grid (Motion) component is straightforward:
- Install the plugin from the Framer plugin library
- To start using the plugin, you need to create or log in to your Zeroqode account. Select Sign In or Sign Up.
- Enter your account details.
- A subscription to all our plugins is required. Once subscribed, you will gain access to all our plugins.
- Add Component: In the plugin interface, click the “Add to Framer Project” button to inject the necessary code into your project.
- Replace Images: Use the properties panel to upload your own images or paste image URLs for each layer and the center image.
- Adjust Scroll Length: Increase or decrease the “Scroll Length” value to control how fast or slow the animation plays during scroll.
- Customize Appearance: Set the background color, image border radius, grid width, and gap between images.
- Preview: Use Framer’s preview mode to test the scroll animation — the effect is only visible in preview, not on the canvas.
The component works immediately after adding it to your project with default Unsplash images. All customization is done through the properties panel.
The animation is only visible in preview/published mode. On the Framer canvas, the component renders a static grid layout showing all images at full opacity.
Component Properties
The component contains comprehensive property controls for customizing images across three animation layers, the center hero image, and the overall grid appearance.
Scroll Animation with Grid (Motion)
Each image layer supports two input methods: uploaded responsive images (drag & drop) and URL strings. Uploaded images always take priority over URLs. If both are empty, default Unsplash images are used.
Fields:
Title | Description | Type |
Center Image | The main hero image that starts fullscreen and shrinks into the center grid cell during scroll | Responsive Image |
Center URL | Fallback URL for the center image. Used only if no Center Image is uploaded | String |
Outer Edges | Images for the left and right edges of the grid (columns 1 and 5). Images alternate between left and right columns. Max 8 images | Array of Responsive Images |
Outer URLs | URL fallback for outer edge images. Used only if Outer Edges is empty. Max 8 URLs | Array of Strings |
Inner Columns | Images for inner columns (columns 2 and 4). Images alternate between left-inner and right-inner columns. Max 8 images | Array of Responsive Images |
Inner URLs | URL fallback for inner column images. Used only if Inner Columns is empty. Max 8 URLs | Array of Strings |
Center Column | Top and bottom images of the center column (column 3, rows 1 and 3). Max 2 images | Array of Responsive Images |
Center URLs | URL fallback for center column images. Used only if Center Column is empty. Max 2 URLs | Array of Strings |
Background | Background color of the section | Color |
Grid Width | Maximum width of the image grid in pixels (400–3000) | Number (px) |
Scroll Length | Total scrollable height of the section. Higher values result in a slower, longer animation (150–500) | Number (vh) |
Max Gap | Maximum spacing between grid images in pixels (4–200) | Number (px) |
Image Radius | Border radius for all images in pixels (0–64) | Number (px) |
Grid Layout
The grid consists of 5 columns and 3 rows (15 cells total). Images are distributed across three animation layers that reveal in sequence:
Layer | Grid Columns | Animation Order | Description |
Layer 1 — Outer Edges | Columns 1 and 5 | Last (appears last) | Outermost images on left and right edges. Hidden on mobile |
Layer 2 — Inner Columns | Columns 2 and 4 | Middle | Inner images flanking the center |
Layer 3 — Center Column | Column 3, rows 1 and 3 | First (appears first) | Top and bottom of the center column |
Scaler — Center Image | Column 3, row 2 | Always visible | Hero image that shrinks from fullscreen to grid cell size |
Responsive Behavior
- Desktop (> 600px): Full 5-column grid. All three layers are visible.
- Mobile (≤ 600px): Grid collapses to 3 columns. Layer 1 (outer edges) is hidden. The grid width adjusts to fit the narrower viewport with a 4:5 aspect ratio constraint.