GSAP lnertia Grid

Media assets in a fluid

GSAP Inertia Media Grid is a dynamic React code component for Framer designed to display media assets in a fluid, interactive grid layout. Powered by GSAP physics timelines, individual cards calculate mouse movement direction and velocity in real time, executing elastic spring rebounds, velocity-based displacement, and randomized rotation angles on hover.

What it does

• GSAP Velocity & Spring Physics: Tracks real-time mouse delta values to push cards along cursor trajectories with elastic spring rebounds.

• Responsive Breakpoint Column Layouts: Dynamically detects container widths via a guarded ResizeObserver to adjust matrix layouts across Mobile, Tablet, and Desktop viewports.

• Randomized Angular Tilting: Applies spring-loaded rotation vectors to images upon pointer entry and movement, automatically resetting on exit.

• Interactive Media Links: Supports optional URL target arrays and full keyboard navigation (Space/Enter keys) with custom tab-opening behaviors.

• Canvas Renderer Safety: Integrated with Framer's useIsStaticRenderer check to disable real-time event listeners inside the Framer canvas while editing.

Great for

• Interactive Portfolio Galleries: Showcase design projects, case studies, or photography with playful cursor physics.

• Agency Client Grid Showcases: Display agency clients, press mentions, or brand logos with dynamic tactile feedback.

• E-Commerce & Lookbooks: Present featured product variants or editorial image assets in an engaging, interactive format.

• Creative Hero Sections: Add a responsive, modern media grid backdrop to landing pages.

Need help?

Have questions or feature suggestions? Reach out anytime at [email protected] or on X @karimsaif0.