Remix the preview file.
3 Tile Shapes – Square, Circle & Chessboard pattern modes
Multi-Directional Flow – Animate from top, bottom, left, right or custom directions
Randomized Delay Control – Organic or structured animation sequencing
Adjustable Grid Density – Control tile size, spacing & layout precision
Full Color Customization – Match brand palettes or create contrast transitions
Timing & Speed Control – Fine-tune duration, stagger & smoothness
Reveal & Conceal Modes – Works for both entering and exiting sections
Optimized for Smooth Scroll Performance
Responsive & Fully Framer-Compatible
Section Transitions
Portfolio Storytelling
Hero Section Reveals
Creative Loading States
Agency & Studio Websites
Interactive Landing Pages
Scroll-Based Narratives
Drag Pixel Transition onto your canvas
Set position as Absolute and send it to back of the section.
Set height as 120% and align it to the direction you want your animation to start from
Choose your tile shape (Square, Circle, Chessboard)
Set direction, grid density & delay pattern
Customize colors and timing
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!
Remix the preview file.
3 Tile Shapes – Square, Circle & Chessboard pattern modes
Multi-Directional Flow – Animate from top, bottom, left, right or custom directions
Randomized Delay Control – Organic or structured animation sequencing
Adjustable Grid Density – Control tile size, spacing & layout precision
Full Color Customization – Match brand palettes or create contrast transitions
Timing & Speed Control – Fine-tune duration, stagger & smoothness
Reveal & Conceal Modes – Works for both entering and exiting sections
Optimized for Smooth Scroll Performance
Responsive & Fully Framer-Compatible
Section Transitions
Portfolio Storytelling
Hero Section Reveals
Creative Loading States
Agency & Studio Websites
Interactive Landing Pages
Scroll-Based Narratives
Drag Pixel Transition onto your canvas
Set position as Absolute and send it to back of the section.
Set height as 120% and align it to the direction you want your animation to start from
Choose your tile shape (Square, Circle, Chessboard)
Set direction, grid density & delay pattern
Customize colors and timing
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!
Rima Biswas
