Image Assemble

Description

Image Assemble breaks any image into a grid of fragments that scatter in 3D space, then reassemble into a crisp, whole image as the visitor scrolls into view — powered by GSAP + ScrollTrigger for buttery-smooth performance.

What you can customize:

• Grid — set columns and rows independently (3–100 each) for fine or chunky fragmentation

• Assembly pattern — Center Burst, Edges Inward, Diagonal Sweep, Column Sweep, or Random Matrix

• Spread direction — choose where fragments fly in from: center, any edge, or any corner

• Scatter distance — control exactly how far fragments start before assembling, from a subtle shift to a dramatic explosion

• 3D depth & rotation — independent X/Y/Z rotation range and depth spread for a true 3D feel

• Easing — Smooth, Sharp, Bounce, or Spring

• Playback — scrub with scroll, play once, or replay every time it re-enters view

• Starting opacity & scale — fine-tune how fragments look before they lock into place

• Image fit & position — cover / contain / fill, with 9-point alignment

• Border radius — rounded corners carried cleanly across every fragment

• Auto-responsive — rebuilds itself on resize, with automatic fallback if an image fails to load

Perfect for hero sections, portfolio galleries, case studies, and about pages that need an entrance people remember.