Drawer Menu Slide Animation

Store Design
, , ,

Topic summary

Goal: change the Dawn theme’s drawer menu to use a fade-in/out animation and fix an apparent drawer icon issue.

Key actions:

  • One participant offered collaborator access to implement changes directly.
  • Another provided a code snippet to add in theme.liquid immediately after the tag.

Outcome:

  • The provided code achieved the desired fade animation. The original poster confirms it works, though the animation only behaves as expected starting from the second open/close attempt.

Unresolved items:

  • The drawer icon issue mentioned initially was not addressed further in the thread.
  • The “works on second try” behavior remains unexplained; no debugging steps were discussed.

Status:

  • Partially resolved. Fade animation implemented successfully with a minor quirk, and the icon problem remains open. Potential next steps include investigating initialization or first-load states for the drawer script/CSS and addressing the icon rendering/selector issue if still present.
Summarized with AI on December 25. AI used: gpt-5.
1

Hello everyone,

So, I always hated the drawer menu animation in Dawn theme and I’ve tried so many codes and none of them worked.

The only thing I know how to do is to remove the animation but not modifying it.

I want it to have a fade-in and out animation.

Can somebody help me out with this?

Thanks.

Also, there is something going wrong with the icon of the drawer menu.

I would appreciated if somebody can fix it!

www.blankstudio.store

2

Hi, @StudioBlank

I can help you with it. So I need to access your store as a collaborator if possible.

3

Hi @StudioBlank

Plesae add this code to your theme.liquid file, after in Online Store > Themes > Edit code
1 Like
4

Nice, this actually works!!

Its weird why the animation works after the second try.

But overall, its working very well.

Thank you!