Skip to content

feat: Add CSS Spring Physics Accordion for Product Catalog Layouts (#… #39366

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
SAPTARSHI-coder merged 2 commits into from
Jul 8, 2026
Merged

feat: Add CSS Spring Physics Accordion for Product Catalog Layouts (#… #39366

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
50b8689
feat: Add CSS Spring Physics Accordion for Product Catalog Layouts (#…
realtushartyagi Jul 8, 2026
f5f793d
Merge branch 'main' into feature/css-spring-physics-accordion-product…
SAPTARSHI-coder Jul 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
57 changes: 57 additions & 0 deletions ...g-physics-accordion-for-product-catalog-layouts-realtushartyagi-33122/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
# CSS Spring Physics Accordion for Product Catalogs

A pure CSS accordion component built on native `<details>` and `<summary>` HTML elements. Designed specifically for e-commerce and product catalogs, it features a snappy "Spring Physics" interaction pattern: when the accordion expands, the content reveals itself using a bouncy, custom `cubic-bezier` timing function, providing satisfying tactile feedback reminiscent of premium native mobile shopping apps.

## Files
- `demo.html` – A standalone demonstration page featuring a mocked product detail layout with a gallery, pricing, and three interactive accordion sections (Description, Specs, Shipping).
- `style.css` – The heavily-commented stylesheet containing the custom `cubic-bezier` spring logic, the CSS Grid trick for height transitions, and the animated plus/minus indicator.

## How it works
1. **Semantic Foundation**: Relies entirely on the native HTML5 `<details>` and `<summary>` tags, providing built-in accessibility and keyboard navigation out of the box.
2. **Spring Physics via CSS Grid**: Native `<details>` elements do not animate their height by default. This stylesheet uses the modern CSS Grid trick (`grid-template-rows: 0fr` to `1fr`) on the `.ease-spring-content` wrapper. The secret sauce is the `--ease-spring-easing` variable (`cubic-bezier(0.175, 0.885, 0.32, 1.1)`), which slightly overshoots the target height and settles back into place rapidly.
3. **Cascading Content Animation**: To amplify the effect, the inner `.accordion-body` block features a secondary `transform: scale(0.98) translateY(-4px)` and opacity fade. When the accordion opens, this content springs down and scales up into place, creating a fluid, multi-layered cascade effect.
4. **Animated Plus/Minus**: The toggle indicator is built from two absolute `<span>` lines forming a plus icon. When opened, the vertical line rotates to form a minus sign, utilizing the exact same snappy spring curve.

## Usage

You can copy the HTML structure and CSS variables directly into your product detail layouts.

```html
<details class="ease-spring-accordion" name="product-details">
<summary class="ease-spring-summary">
<h3>Product Description</h3>
<div class="ease-spring-indicator">
<span class="indicator-line horizontal"></span>
<span class="indicator-line vertical"></span>
</div>
</summary>
<div class="ease-spring-content">
<div class="ease-content-inner">
<div class="accordion-body">
<p>Your product information goes here.</p>
</div>
</div>
</div>
</details>
```

### Customizing the Spring Physics
The physics are governed by standard CSS Custom Properties defined in `:root`, making it trivial to adjust the "snappiness" for your brand:

```css
:root {
--ease-spring-transition-time: 0.5s; /* Duration of the spring */

/*
The Y-value of 1.1 is what causes the slight "overshoot".
Increase it for more bounce, decrease towards 1.0 for a flatter transition.
*/
--ease-spring-easing: cubic-bezier(0.175, 0.885, 0.32, 1.1);
}
```

## Accessibility (prefers-reduced-motion)
Because it uses `<details>` and `<summary>`, screen readers naturally understand the expanded/collapsed state without needing manual `aria-expanded` ARIA attributes. A strict `@media (prefers-reduced-motion: reduce)` block is included to instantly strip away the spring bezier transforms, grid animations, and content fades for users who are sensitive to motion.

## Why it fits EaseMotion CSS
EaseMotion advocates for zero-JavaScript UI patterns whenever possible. High-end e-commerce animations are typically built using bloated React/Vue state libraries or heavy JS physics engines just to achieve snappy accordion transitions. By combining the native `<details>` element with modern CSS Grid height transitions and a custom overshoot cubic-bezier, this component delivers a deeply interactive, 60fps physics-based experience entirely within the browser's CSS rendering engine.
96 changes: 96 additions & 0 deletions .../css-spring-physics-accordion-for-product-catalog-layouts-realtushartyagi-33122/demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Spring Physics Accordion - Product Catalog</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Mock E-Commerce Product Layout -->
<main class="product-layout">
<div class="product-gallery">
<div class="mock-image">Product Image</div>
</div>

<div class="product-info">
<header class="product-header">
<h1>Premium Noise-Cancelling Headphones</h1>
<p class="price">$299.00</p>
<button class="add-to-cart">Add to Cart</button>
</header>

<!-- Spring Physics Accordion Group -->
<div class="ease-spring-product-accordion-group">

<!-- Section 1: Description -->
<details class="ease-spring-accordion" name="product-details" open>
<summary class="ease-spring-summary">
<h3>Product Description</h3>
<div class="ease-spring-indicator">
<span class="indicator-line horizontal"></span>
<span class="indicator-line vertical"></span>
</div>
</summary>
<div class="ease-spring-content">
<div class="ease-content-inner">
<div class="accordion-body">
<p>
Immerse yourself in high-fidelity audio with our industry-leading active noise cancellation.
Engineered for all-day comfort, these headphones feature plush memory foam earcups and a lightweight,
durable aluminum frame.
</p>
</div>
</div>
</div>
</details>

<!-- Section 2: Specifications -->
<details class="ease-spring-accordion" name="product-details">
<summary class="ease-spring-summary">
<h3>Tech Specifications</h3>
<div class="ease-spring-indicator">
<span class="indicator-line horizontal"></span>
<span class="indicator-line vertical"></span>
</div>
</summary>
<div class="ease-spring-content">
<div class="ease-content-inner">
<div class="accordion-body">
<ul class="spec-list">
<li><strong>Battery Life:</strong> Up to 30 hours</li>
<li><strong>Bluetooth:</strong> Version 5.3</li>
<li><strong>Weight:</strong> 254 grams</li>
<li><strong>Charging:</strong> USB-C fast charge</li>
</ul>
</div>
</div>
</div>
</details>

<!-- Section 3: Shipping & Returns -->
<details class="ease-spring-accordion" name="product-details">
<summary class="ease-spring-summary">
<h3>Shipping & Returns</h3>
<div class="ease-spring-indicator">
<span class="indicator-line horizontal"></span>
<span class="indicator-line vertical"></span>
</div>
</summary>
<div class="ease-spring-content">
<div class="ease-content-inner">
<div class="accordion-body">
<p>
Free standard shipping on all orders over $50. Need it faster? Expedited shipping options
are available at checkout. We offer a hassle-free 30-day return policy on all products in their original packaging.
</p>
</div>
</div>
</div>
</details>

</div>
</div>
</main>
</body>
</html>
Loading
Loading