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 karimsaif010@gmail.com or on X @karimsaif0 .

Media assets in a fluid