RDM Mobile Menu - Two lines animated to an X on click. Use JS or Gumby toggle to add/remove the is-active class.

mobile-menu.html

<a href="#" class="mobile-menu-button">
<div class="mobile-menu-button-wrapper">
    <div class="line one"><span></span></div>
    <div class="line two"><span></span></div>
</div>
</a>

mobile-menu.scss

.mobile-menu-button-wrapper {
    width: em($larger);
    height: em($large);
    position: absolute;
    top: em($xxlarge);
    right: em($larger);

    .line span {
        width: em($larger);
        height: em(5px);
        position: absolute;
        background-color: white;
        border-radius: 3px;
    }
}

.mobile-menu-button {
    .line.one {
        transform: translateY(0);
        transition: transform 0.25s 0.25s;
    }

    .line.two {
        transform: translateY(em($small));
    }

    .line.one span {
        transform: rotate(0);
        transition: transform 0.25s;
    }

    .line.two span {
        transform: rotate(0);
        transition: transform 0.25s;
    }
}

.mobile-menu-button.is-active {
    .line.one {
        transform: translateY(em($small));
        transition: transform 0.25s;
    }

    .line.two {
        transition: transform 0.25s;
    }

    .line.one span {
        transform: rotate(45deg);
        transition: transform 0.25s 0.25s;
    }

    .line.two span {
        transform: rotate(-45deg);
        transition: transform 0.25s 0.25s;
    }
}