Animating material icons to transform: Hamburger to X

Question

Long time reader, first-time poster. I want to have a material hamburger transform to an "X" when clicked and then transform back when clicked again in an Angular application. The website https://material.io/design/iconography/animated-icons.html#transitions shows there are animations just like what I want, but there are no docs on how to do it.

I tried a CSS approach but it is not showing and it would be good to keep the project consistent with the material icons.

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
  <span class="sr-only">Toggle navigation</span>
  <span class="icon-bar top-bar"></span>
  <span class="icon-bar middle-bar"></span>
  <span class="icon-bar bottom-bar"></span>
</button>

CSS

navbar-toggle {
  border: none;
  background: transparent !important;

  &:hover {
    background: transparent !important;
  }

  .icon-bar {
    width: 22px;
    transition: all 0.2s;
  }
  .top-bar {
    transform: rotate(45deg);
    transform-origin: 10% 10%;
  }
  .middle-bar {
    opacity: 0;
  }
  .bottom-bar {
    transform: rotate(-45deg);
    transform-origin: 10% 90%;
  }
}

.navbar-toggle.collapsed {
  .top-bar {
    transform: rotate(0);
  }
  .middle-bar {
    opacity: 1;
  }
  .bottom-bar {
    transform: rotate(0);
  }
}

The above code is a workaround to the material icons. When I run the above code, I get a transparent button with no animations. If anyone knows how to do a transition from a hamburger to an "X" in angular with bootstrap, I would be very grateful.

As mentioned in this post (https://stackoverflow.com/questions/51325400/angular-4-animated-icons), there isn't any documentation because the site is just showing what you 'could' do with the icons.You'll have to experiment with it and find something you're happy with. Here are some resources that could prove useful: https://cloudcannon.com/deconstructions/2014/12/05/material-design-delightful-details.html. | https://medium.com/@beeman/animate-font-awesome-icons-in-angular-2823474e0d22 — Jojofoulk, Jun 19 '19 at 03:29

Douglas P. · Answer 1 · 2019-06-20T22:59:10.157

6

I made this simple stackblitz using just angular animations (no bootstrap) that still needs some work in the CSS of the states of the animation to make it nice and smooth but you can get the idea.

edited Jun 20 '19 at 22:59

answered Jun 19 '19 at 03:36

Douglas P.

560
4
19

Thank you so much! This combined with a docs review really helped me to create an amazing animation! Thank you again for your help! – eroc83 Jun 20 '19 at 19:41

score 2 · Answer 2 · answered Apr 24 '20 at 13:40

2

You can use hambugers library.
I'm using Angular material and this is is the closest I got to the original material menu icon.
stackblitz

answered Apr 24 '20 at 13:40

cheziHoyzer

4,803
12
54
81

Animating material icons to transform: Hamburger to X

2 Answers2