Павел Антонов

В начальном состоянии блоку дать z-index: -1; Когда добавляете класс active дописать opacity: 1 и z-index: 1 например. https://jsfiddle.net/u20cdL3g/

набросал небольшой пример может натолкнет вас на правильное решение,
я предлагаю сделать круг svg и убирать у него бордер постепенно и одновременно сдвигать круг вправо
вторая анимация это отрисовка линии

https://codepen.io/freislot/pen/KywqZw

$(".класс кнопки").click(function(){
    $(".класс меню").toggleClass("visible");
})

.класс меню{
   overflow:hidden;
   width:0; 
   transition:all 0.2s ease;
}
.класс меню.visible{
   width:700px; //например   
}

пример тут

Можно не width менять а позицию left/right все зависит от вашего макета)

Пока реализовал так codepen.io/freislot/pen/PbMpow
Прорисовку линий от иконок к центру тоже реализовал но закомментировал, дизайнер передумал :)