---
title: "Image Grid Animation — Free Framer component · Best of Framer"
description: "Free Framer component · by Ahmet Loca · Galleries. Image Grid Animation Pixel Image Reveal is a scroll-triggered pixel grid animation component for Framer."
canonical: "https://framer.elliotli.dev/component/image-grid-animation"
---

[Home](/)/[Components](/components)/[Galleries](/components/category/galleries)/Image Grid Animation

# Image Grid Animation

Pixel Grid Image Reveal Animation

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

![Image Grid Animation preview image 1](https://framer.elliotli.dev/og/component/image-grid-animation/c5d168fdc1c37719/1600x1200.jpg)

## Summary

Image Grid Animation Pixel Image Reveal is a scroll-triggered pixel grid animation component for Framer.

## Description

**MORE FRAMER COMPONENTS LIKE THIS**

**✦ Browse +38 FREE + 85 premium components:** [**https://frameze.com/components**](https://frameze.com/components)

**✦ Card Bundle:** [**https://frameze.com/components/category/card?ref=bundles**](https://frameze.com/components/category/card?ref=bundles)

## Image Grid Animation

**Pixel Image Reveal** is a scroll-triggered pixel grid animation component for Framer. When your image enters the viewport, a grid of animated pixels dissolves away to reveal the image beneath — creating bold, cinematic entrances that make your site unforgettable.

**\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_**

**Donation:** [**https://ahmetloca.dub.link/donation**](https://ahmetloca.dub.link/donation)

**if it saves you time, a small tip is always appreciated.**

**\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_**

**Features**

-   4 reveal directions: Random, Left to Right, Top to Bottom, Center Out
    
-   Adjustable pixel size, animation duration & scale effect
    
-   Replay on hover option
    
-   Works on any image layer
    
-   Demo component included with interactive direction switcher
    

**How to use**

1.  Add the **PixelGridReveal** component to your page
    
2.  Upload your image in the Image field
    
3.  Choose your reveal direction and adjust settings
    
4.  The animation triggers automatically when the component enters the viewport
    

**Demo Component** A **PixelGridRevealDemo** component is also included for preview purposes only — it lets you test all 4 reveal directions interactively. You can safely delete it from your project once you're done exploring.

**Customization**

-   Pixel Size — controls the grid block size (small = fine grain, large = chunky pixels)
    
-   Duration — total animation duration in ms
    
-   Scale From — starting scale of the image (creates a subtle zoom-in effect)
    
-   Reveal Direction — choose how pixels dissolve
    
-   Replay on Hover — replays the animation every time the user hover
    

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

-   All · #3964

## Details

- **Author**: Ahmet Loca
- **Published**: 2026-05-29
- **Updated**: 2026-07-27
- **Added**: 2026-05-14
- **Categories**: Galleries

## More like this

-   [Infinite Pan Canvas](/component/infinite-pan-canvas) — Aisol Studio · $15 — Endless image wall you can drag
-   [CMS Photo Pile](/component/cms-photo-pile) — Marso Angelov · $10 — Draggable Photo Gallery
-   [CMS Infinity Grid](/component/cms-infinity-grid) — 55N · Free — Boundless exploration.
-   [Endless CMS Reel](/component/endless-cms-reel) — Marso Angelov · $10 — Horizontal Momentum Gallery