Pixel Scroll Pro — Customizable Shape Transitions

Remix 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

New to framer? Sign up here and start using this component to create beautiful sites with transitions!