How to add Animation to Background when opnening Drawer?

Store Design
, , , , , , , ,
1

Hi guys,

I’ve added an animation to my menu and cart drawer and when I interact with both, a transparent black background appears. I want to animate the background and I don’t want it to just pop up, I want it to appear slowly (at the same speed as the drawer).

Does anyone know how I can do that?

Im using the Refresh Theme

URL: pacefultakeover.com

Password: paceclo

2

Hey @Aihaam

Please follow these steps:

  1. Go to Online Store

  2. Click edit code

  3. Find your theme.liquid file

  4. Add the following code in the bottom of the file above tag

This adds a fade in animation to both the menu’s background and the drawer’s background.

You can adjust the speed of the animation by changing the .6s

Hope this helps :slightly_smiling_face:

Thanks,

Futuremerce

3

Hi, first of all, thank you very much for the answer. It actually worked but now the closing animation for the cart drawer is gone. Can you help me?

4

Hi again,

Please update this part:

.drawer {
    background: transparent;
    transition: background .6s ease-in-out;
}

To this:

.drawer {
    background: transparent;
    transition: .6s ease-in-out;
}

That should resolve that issue.

Thanks,

Futuremerce

5

Now the fade out animation for the menu drawer background when closing is gone