---
title: "Pixel Scroll Pro — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Rima Biswas · Sections. Customizable Shape Transitions"
canonical: "https://framer.elliotli.dev/component/pixel-scroll-pro"
---

[Home](/)/[Components](/components)/[Sections](/components/category/sections)/Pixel Scroll Pro

# Pixel Scroll Pro

Customizable Shape Transitions

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

![Pixel Scroll Pro preview image 1](https://framer.elliotli.dev/og/component/pixel-scroll-pro/321ce2f150188543/1600x1200.jpg)

## Summary

Customizable Shape Transitions

## Description

[Remix](https://framer.link/Q8Vf2sT?via=rima-biswas) the preview file.

## Key Features

1.  **3 Tile Shapes** – Square, Circle & Chessboard pattern modes
    
2.  **Multi-Directional Flow** – Animate from top, bottom, left, right or custom directions
    
3.  **Randomized Delay Control** – Organic or structured animation sequencing
    
4.  **Adjustable Grid Density** – Control tile size, spacing & layout precision
    
5.  **Full Color Customization** – Match brand palettes or create contrast transitions
    
6.  **Timing & Speed Control** – Fine-tune duration, stagger & smoothness
    
7.  **Reveal & Conceal Modes** – Works for both entering and exiting sections
    
8.  **Optimized for Smooth Scroll Performance**
    
9.  **Responsive & Fully Framer-Compatible**
    

## Best For

-   Section Transitions
    
-   Portfolio Storytelling
    
-   Hero Section Reveals
    
-   Creative Loading States
    
-   Agency & Studio Websites
    
-   Interactive Landing Pages
    
-   Scroll-Based Narratives
    

## 🛠 How to Use

1.  Drag **Pixel Transition** onto your canvas
    
2.  Set position as Absolute and send it to back of the section.
    
3.  Set height as 120% and align it to the direction you want your animation to start from
    
4.  Choose your tile shape (Square, Circle, Chessboard)
    
5.  Set direction, grid density & delay pattern
    
6.  Customize colors and timing
    
7.  Scroll to see the transition come to life
    

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-59c3vti6-Y01GDuB3QqGL4PlcFJ44OWweds83Gj)

New to framer? [Sign up here](https://framer.link/rima-biswas) and start using this component to create beautiful sites with transitions!

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

-   All · #10066

## Details

- **Author**: Rima Biswas
- **Price**: $5.00
- **Published**: 2026-03-31
- **Updated**: 2026-07-01
- **Added**: 2026-03-17
- **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