Solved

how to animate my menu drawer?

Fyney
Excursionist
37 4 15

Hi, I was trying to find answers about how to change animation of the menu drawer, since i wanted to change the default animation from Left to Right, to Top to Bottom

 

Here an demonstration of the animation i would like to do.

 

I would appreciated the help, thank you.

 

Website % Password: St0r3P4ssw0rd

Accepted Solution (1)
Fyney
Excursionist
37 4 15

This is an accepted solution.

I Solved it, thank you!!

I just needed to changed the X to Y in the header-drawer 

.menu-drawer {
  transform: translateY(-100%) !important;
}

View solution in original post

Replies 3 (3)

VIEKIN
Shopify Partner
656 79 95

To do that you need customize CSS and change transform attribute from translateX to translateY.

X: horizontal 

Y: vertical

You can please Like and Accepted Solution if my suggestion helpful. And if you want to customize or develop new feature on Theme or App => Contact to us via Email or Skype.
- Contact Support : Gmail | Skype: live:.cid.309f2fbaceec513
Fyney
Excursionist
37 4 15

I think i know what you mean.

 

@keyframes animateMenuOpen {
  0% {
    opacity: 0;
    transform: translateY(-1.5rem);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

 

found this on the base.css and i think i just have to change the way it translate?

Fyney
Excursionist
37 4 15

This is an accepted solution.

I Solved it, thank you!!

I just needed to changed the X to Y in the header-drawer 

.menu-drawer {
  transform: translateY(-100%) !important;
}