Mobilní menu anim v2

Inspired by Aaron Iker

by Petr Haluza

HTML

<div class="frame">
    <ul class="tabbar">
        <li class="active">
            <a href="" class="box">
                <div>
                    <svg>
                        <use xlink:href="#box">
                    </svg>
                    <em></em>
                </div>
            </a>
        </li>
        <li>
            <a href="" class="home">
                <div>
                    <svg>
                        <use xlink:href="#home">
                    </svg>
                </div>
            </a>
        </li>
        <li>
            <a href="" class="calendar">
                <div>
                    <svg>
                        <use xlink:href="#calendar">
                    </svg>
                    <em></em>
                </div>
            </a>
        </li>
    </ul>
</div>

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
    <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="box">
        <path d="M4.2715356,6.86557078 C3.79533783,7.1301251 3.5,7.63205601 3.5,8.1768067 L3.5,15.8231933 C3.5,16.367944 3.79533783,16.8698749 4.2715356,17.1344292 L11.2715356,21.0233181 C11.7245694,21.2750036 12.2754306,21.2750036 12.7284644,21.0233181 L19.7284644,17.1344292 C20.2046622,16.8698749 20.5,16.367944 20.5,15.8231933 L20.5,8.1768067 C20.5,7.63205601 20.2046622,7.1301251 19.7284644,6.86557078 L12.7284644,2.97668189 C12.2754306,2.72499645 11.7245694,2.72499645 11.2715356,2.97668189 L4.2715356,6.86557078 Z"></path>
    </symbol>
    <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="home">
        <path d="M3.66781808,10.0753614 C3.5610739,10.1702451 3.5,10.3062472 3.5,10.4490661 L3.5,20 C3.5,20.8284271 4.17157288,21.5 5,21.5 L19,21.5 C19.8284271,21.5 20.5,20.8284271 20.5,20 L20.5,10.4490661 C20.5,10.3062472 20.4389261,10.1702451 20.3321819,10.0753614 L12.9965458,3.55479593 C12.4282167,3.04961457 11.5717833,3.04961457 11.0034542,3.55479593 L3.66781808,10.0753614 Z"></path>
    </symbol>
  ...

SCSS

.tabbar {
    --primary: #275EFE;
    --background: #fff;
    --icon-active: #fff;
    --x: 64px;
    width: 100%;
    margin: 0;
    padding: 0 16px;
    border-radius: 0 0 28px 28px;
    list-style: none;
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    background: var(--background);
    &:before,
    &:after {
        content: '';
        position: absolute;
        left: 0;
        border-radius: 50%;
        transform: translateX(var(--x));
    }
    &:before {
        width: 64px;
        height: 64px;
        margin-left: -32px;
        background: var(--primary);
        top: -16px;
        z-index: 1;
    }
    &:after {
        width: 84px;
        height: 84px;
        margin-left: -42px;
        background: rgba(255, 255, 255, .08);
        top: -26px;
    }
    li {
        a {
            display: block;
            padding: 24px 0;
            backface-visibility: hidden;
            transition: transform .2s ease;
            -webkit-tap-highlight-color: transparent;
            div {
                --y: 0;
                width: 32px;
                height: 32px;
                margin: 0 auto;
                position: relative;
                z-index: 1;
                backface-visibility: hidden;
                transform: translateY(var(--y));
                svg {
                    display: block;
                    width: 32px;
                    height: 32px;
                    fill: rgba(255, 255, 255, 0);
                    stroke-width: 1px;
                    stroke: var(--primary);
                }
                &:before {
                    --s-x: 1;
                    --s-y: 1;
                    content: '';
                    display: block;
                    position: absolute;
                    z-index: 1;
                    transform: scaleX(var(--s-x)) scaleY(var(--s-y));
                }
            }
            &.box {
                div {
        ...

JavaScript

$('.tabbar li a').on('click', function(e) {

    e.preventDefault();

    let that = $(this),
        li = that.parent(),
        ul = li.parent();

    if(!ul.hasClass('move') && !li.hasClass('active')) {
        ul.children('li').removeClass('active');

        ul.css('--x-n', li.position().left + li.outerWidth() / 2 + 'px');
        li.addClass('move');
        ul.addClass('move');

        setTimeout(() => {
            ul.removeClass('move');
            li.removeClass('move').addClass('active');
            ul.css('--x', li.position().left + li.outerWidth() / 2 + 'px');
        }, 1200);
    }

});