---
title: "GSAP lnertia Grid — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Karim Saif · Cards. Media assets in a fluid"
canonical: "https://framer.elliotli.dev/component/gsap-lnertia-grid"
---

[Home](/)/[Components](/components)/[Cards](/components/category/cards)/GSAP lnertia Grid

# GSAP lnertia Grid

Media assets in a fluid

[View on Framer](https://framer.com/marketplace/components/gsap-lnertia-grid/?via=elliot-li)

![GSAP lnertia Grid preview image 1](https://framer.elliotli.dev/og/component/gsap-lnertia-grid/6568d0f6ad9c61aa/1600x1050.jpg)

## Summary

Media assets in a fluid

## Description

**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](mailto:karimsaif010@gmail.com) or on X [@karimsaif0](https://x.com/karimsaif0).

## Rank history [How rankings work →](/terms#rankings)

-   All · #8414

## Details

- **Author**: Karim Saif
- **Price**: $5.00
- **Published**: 2026-08-01
- **Updated**: 2026-09-16
- **Added**: 2026-08-01
- **Categories**: Cards

## More like this

-   [BlogX Blog Card](/component/blogx-blog-card) — Themomarket · $8 — Blog Framer Component
-   [FluxPrice](/component/fluxprice) — Jeshan Athulesh · $49 — Elevate your SaaS conversion rate in minutes with FluxPrice.
-   [Feature Ribbon Cards](/component/feature-ribbon-cards) — Studio Digital · Free — Interactive image feature cards
-   [Dynamic Pricing Calc](/component/dynamic-pricing-calc) — Dmitry Vorobey · $12 — Pricing cards with live calculator