Как реализовать подобного рода анимацию?
4 слоя уже загружены в виде "слоёного пирога".
передний - сетка из прямоугольных DIV
задние - черно-белые (фильтр CSS3 с эффектом) SVG clipping-круги, как бы описывающие эти прямоугольники
В момент выбора (клика):
1. фильтр снимается с выбранной подложки
2. z-позиция меняется, чтобы круг было видно
3. SVG clipping mask изменяется (анимируется) через JS, создавая эффект расходящегося круга.
1. Если вы обратите внимание, то другая страница начинает отрисовываться уже после того, как круг завершил анимацию (так что тут всего лишь картинка в круге, а не новая страница). Меню у них одинаковое, лежит слоем выше всего. 
2. Далее можно взять что-то вроде: https://css-tricks.com/clipping-masking-css/ и сделать простую аницацию увеличения круга.
3. Вот и весь секрет, имхо.