Drawer Menu Animation Dawn Theme

Shopify Discussion
,

Topic summary

A user sought to synchronize the opening and closing animations for the drawer menu in Shopify’s Dawn theme. The challenge was locating the code controlling the closing animation.

Solution Found:

  • The closing animation duration is controlled in global.js within the closeAnimation(detailsElement) function
  • The key parameter is the elapsed time check: if (elapsedTime < 400)
  • The value 400 represents milliseconds (0.4 seconds)

Implementation:
Match this duration value to your CSS animation duration to ensure the full closing animation displays before the menu closes. For example, if your opening animation is 600ms, change the condition to if (elapsedTime < 600).

The issue is now resolved with a working solution provided.

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

Hello,

i want the same animation for opening and closing the drawer menu in dawn theme. I can not found the piece of code which is for the closing part. The opening can be modified but not the closing.

Thanks for your help

Phil

2

Okay guys. For all with the same problem. The duration of the visibility of the menu while closing is the important thing here. Its delcared in global.js
"

closeAnimation(detailsElement) {
let animationStart;

const handleAnimation = (time) => {
if (animationStart === undefined) {
animationStart = time;
}

const elapsedTime = time - animationStart;

if (elapsedTime < 400) {
window.requestAnimationFrame(handleAnimation);
} else {
detailsElement.removeAttribute(‘open’);
if (detailsElement.closest(‘details[open]’)) {
trapFocus(detailsElement.closest(‘details[open]’), detailsElement.querySelector(‘summary’));
}
}
};"

Just set the time on the same duration of your animation duration and you could see the full closing animation.