---
title: "Grid Transition — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Francesco Caronte · Sections. grid transition.The image is progressively uncovered using animated square pixels, creating a clean, digital-style reveal that feels…"
canonical: "https://framer.elliotli.dev/component/grid-transition"
---

[Home](/)/[Components](/components)/[Sections](/components/category/sections)/Grid Transition

# Grid Transition

A clean grid-based transition

[View on Framer](https://framer.com/marketplace/components/grid-transition/?via=elliot-li)

![Grid Transition preview image 1](https://framer.elliotli.dev/og/component/grid-transition/585b22b306d15cf3/1600x1200.jpg)

## Summary

grid transition.The image is progressively uncovered using animated square pixels, creating a clean, digital-style reveal that feels both technical and elegant.

## Description

## About this Component

Grid Transition is a no-code animation component that reveals images through a dynamic pixel grid transition.The image is progressively uncovered using animated square pixels, creating a clean, digital-style reveal that feels both technical and elegant.

## Customizable Properties

### Image

**Image** – Upload or replace the image to be revealed

### Pixel Style

**Pixel Color** – Color of the pixel grid used during the reveal**Pixel Size** – Size of each pixel square (in px)

### Animation

**Direction** – Reveal direction (Top, Bottom, Left, Right)**Duration** – Total length of the reveal animation**Delay** – Delay before the animation starts

### Interaction

**Play on Appear** – Automatically plays when the component enters the viewport**Play on Hover** – Triggers the animation on hover instead of on load

## Use cases

Hero sections · Image reveals · Editorial layouts · Portfolios · Experimental UI · Subtle visual accents

## Rank history [How rankings work →](/terms#rankings)

-   All · #8692

## Details

- **Author**: Francesco Caronte
- **Price**: $5.00
- **Published**: 2026-02-13
- **Updated**: 2026-02-25
- **Added**: 2026-02-05
- **Categories**: Sections

## More like this

-   [Sale Bar](/component/sale-bar) — Brandon Grimes · $12 — Auto-start Black Friday promo bar
-   [Show and Tell](/component/show-and-tell) — Majed Monem · $9 — Feature tabs that play themselves
-   [Infinite Picker Whee](/component/infinite-picker-whee) — Karim Saif · Free — Rotating 3D text selector
-   [Resource Preview Dec](/component/resource-preview-dec) — felix strobel · Free — Editorial guides with folding cove