Как сделать такой красивый эффект при открытии меню навигации в мобильной версии?

Также можно использовать библиотеку jQuery - там есть функции для подобной анимации

jQuery( '#td-top-mobile-toggle a, .td-mobile-close a' ).click(function(){
if ( jQuery( 'body' ).hasClass( 'td-menu-mob-open-menu' ) ) {
jQuery( 'body' ).removeClass( 'td-menu-mob-open-menu' );
} else {
jQuery( 'body' ).addClass( 'td-menu-mob-open-menu' );
}
});

Вместо #td-top-mobile-toggle a название Вашей кнопки.
Для класса td-menu-mob-open-menu прописать в стилях scale допустим 0.8, и transition
Логика скрипта - по клику на кнопку меню на body вешается класс, который плавно уменьшает его в размерах