Editorial Multi Loader
A high-end, multi-stage intro animation component for Framer. Built for studios, agencies, and designers who want their site to open with intention.
How it works
Five images slide in simultaneously from opposite vertical directions — images 1, 3, and 5 rise from below while images 2 and 4 descend from above. They meet in a perfectly centered horizontal grid, pause for a held editorial beat, then the center image unfolds and blooms to fill the entire component frame.
Three phases. Zero configuration required.
Phase 1 — Entry: All five cards slide in simultaneously with a luxury cubic bezier easing, decelerating smoothly into their resting grid positions
Phase 2 — Grid Rest: The five images hold in their positions for a customizable pause, creating an upscale editorial moment
Phase 3 — Bloom: The center image expands fluidly to fill 100% of the component, masking the flanking cards as they fade out
Property Panel Controls
Every parameter is exposed and live-editable directly from the Framer sidebar — no code required after installation:
5 individual image slots
Item width and height
Gap between cards
Border radius
Entry animation speed
Grid hold delay
Bloom speed
Ease profile (Luxury, Anticipate, Circular)
Background color
Canvas View toggle (1 — cards layout for designing, 2 — full bleed for overlay design)
Built-in design tools
Switch the Canvas View to 1 to see all five images in their sitting grid positions while you design — swap images, adjust sizes, and fine-tune layout in real time. Switch to 2 to see the final full-bleed center image and place text overlays or UI elements on top with full visual accuracy.
Smart preloading
All five images are preloaded before the animation begins — no white boxes, no flickering, no partial renders. The animation only fires once every asset is fully cached.
Scroll lock
The page is locked during the animation sequence and released the exact moment the bloom completes, preventing accidental scrolling past the intro. Works on both desktop and mobile.
Page-scoped
The animation and scroll lock are scoped entirely to the page the component lives on. Other pages in your Framer project are completely unaffected.
Perfect for
Portfolio sites, agency homepages, luxury brand intros, fashion editorials, photography showcases, and any project where the first impression needs to feel considered and cinematic.
Aathif Thajudeen
