component
EditorialMultiLoader
By Aathif Thajudeen
Details
- Aathif ThajudeenAuthor
- componentType
- 2026-06-06Published
- 2026-06-05Updated
- 2026-06-03Added
- LoadersCategories
Summary
Luxury multi-image reveal animation
Description
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.
Introduction
Luxury multi-image reveal animation
Rank history
Daily rank per list, from the first snapshot — lower is better.
- All · #1737