How to slow animation of collapsible row drop down

Store Design
, , , , , , , , , ,

Topic summary

A user wants to slow down the collapsible drawer animation on their Dawn theme Shopify store to make it smoother on both mobile and desktop.

A solution was provided with step-by-step instructions:

  • Navigate to Online Store → Themes → Edit code
  • Locate the base.css file
  • Add CSS code at the bottom that controls animation timing

The CSS solution includes:

  • Setting interpolate-size: allow-keywords on the root element
  • Adding a 0.5s transition duration to the details element’s content
  • Using transition-behavior: allow-discrete for smoother animation
  • Controlling block-size changes from 0 to auto when opened

The discussion appears resolved with a concrete code-based solution provided.

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
1

I’m looking to slow down the animation of the collapsible drawer when it drops down so it would be more smoother. For mobile and desktop on dawn theme

URL knmb1c-pf.myshopify.com

password samurai

2

Hi @undercoverfresh , you can follow these steps:

Step 1: Open Online Store → Themes → Edit code.

Step 2: Find base.css file.

Step 3: Paste this code at the bottom of the file

:root {
    interpolate-size: allow-keywords;
}

details {
    overflow: hidden;
}

details::details-content {
 block-size: 0;
 transition: block-size 0.5s ease, content-visibility 0.5s ease;
    transition-behavior: allow-discrete;
}

details[open]::details-content {
  block-size: auto;
}

If this helpful, please let us know by giving us a like and marking its as a solution. Thanks you :heart_eyes: