add menu drawer slide open and close animation shopify

ebukaobua
New Member
5 0 0

add menu drawer slide open and close animation shopify like the one in mobile version of https://gallerydept.com/

Replies 5 (5)

deepaksharma
Shopify Partner
448 62 92

add transition css to your drawer

@media only screen and (max-width: 767.98px)
.your-menu-drawer {
    transition: transform .5s cubic-bezier(.55,.03,.37,.96);
}
Deepak Sharma || Shopify Developer || Helping eCommerce Stores
- Was my reply helpful? Accept it as solution
- Was your question answered? Mark it as an Accepted Solution.
-CHAT ON WHATSAPP | BUY ME A COFFEE | MAIL ME: ds2305187@gmail.com
ebukaobua
New Member
5 0 0

didnt work 😞 

https://trebla-corp.myshopify.com/

pass: trebla808!

deepaksharma
Shopify Partner
448 62 92

Check your DM

Deepak Sharma || Shopify Developer || Helping eCommerce Stores
- Was my reply helpful? Accept it as solution
- Was your question answered? Mark it as an Accepted Solution.
-CHAT ON WHATSAPP | BUY ME A COFFEE | MAIL ME: ds2305187@gmail.com
deepaksharma
Shopify Partner
448 62 92

This code is already applying transition to your drawer

.js details[open]>.menu-drawer, .js details[open]>.menu-drawer__submenu {
    transition: transform var(--duration-default) ease, visibility var(--duration-default) ease;
}

 

find that code in component-menu-drawer.css

and replace the code with below

.js details[open]>.menu-drawer, .js details[open]>.menu-drawer__submenu {
    transition: transform 0.5s ease-in-out, visibility 0.5s ease-in-out;
}

I have added transition time of 0.5s as per the website you referenced, you can find your ideal time.

Also remove the previous code I gave.

Deepak Sharma || Shopify Developer || Helping eCommerce Stores
- Was my reply helpful? Accept it as solution
- Was your question answered? Mark it as an Accepted Solution.
-CHAT ON WHATSAPP | BUY ME A COFFEE | MAIL ME: ds2305187@gmail.com
ebukaobua
New Member
5 0 0

still not working 😭 im using spotlight theme