EditorialMultiLoader

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.