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.
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.
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.
Have questions or feature suggestions? Reach out anytime at karimsaif010@gmail.com or on X @karimsaif0.
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.
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.
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.
Have questions or feature suggestions? Reach out anytime at karimsaif010@gmail.com or on X @karimsaif0.
