Как реализовать подобного рода анимацию?

Question

[iffkomc]

Самое сложное здесь то, что внутри круга отображается уже другая страничка - урла меняется.
Но переход на другую страницу - такой вариант вообще не подходит, потому что внутри круга отображается уже другая страница. Поэтому придумал просто менять урлу вручную через js, а страницу открывать анимацией. Вопрос, как лучше организовать структуру и как реализовать такую вещь через css3 либо может js, или это должен быть svg. Любые идеи будут очень полезны

Answer 1

[xmoonlight]

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

Answer 2

[Денис Инешин]

1. Если вы обратите внимание, то другая страница начинает отрисовываться уже после того, как круг завершил анимацию (так что тут всего лишь картинка в круге, а не новая страница). Меню у них одинаковое, лежит слоем выше всего.
2. Далее можно взять что-то вроде: https://css-tricks.com/clipping-masking-css/ и сделать простую аницацию увеличения круга.
3. Вот и весь секрет, имхо.