Как сделать подобную анимацию в JavaScript?

Question

[lovly093]

Здравствуйте, наткнулся на интересную реализацию смены темы в браузере https://imgur.com/a/2SOM6OS и столкнулся с рядом трудностей. Можно заметить, что тема изменяется отдельно у внутренних объектов на странице, подобно их глубине проектирования с интервалом каждого, где то в 0.1s. И здесь возник вопрос, или скорее потребность в совете, какие инструменты в данном случае лучше использовать для реализации данной анимации, буду благодарен статье или тех. документации. Спасибо.

Answer 1

[accountnujen]

конкретно это вероятно сделано в каком-нибудь After Effects. То есть вообще не сайт, а просто анимированный макет.

сделать подобное именно в JS можно на GSAP - https://gsap.com/
Это библиотека, с помощью которой можно как на timeline анимировать всё на сайте. Очень удобная и классная штука.

Answer 2

[ImagineTables]

Не сильно долго думая:

1. Рендерим чем-то типа https://github.com/niklasvh/html2canvas.

2. Выводим картинку в верхнем слое.

3. Снизу мгновенно меняем тему (через body.light).

4. При помощи mask-image делаем для картинки из п. 2 линейный градиент с несколькими частично пересекающимися кругами (как в макете). Изначально значения альфа-канала во всех опорных точках должно быть 1.0

5. Запускаем transition к таким значениям альфа-канала, чтобы был эффект распространения прозрачности по кругам от центра наружу. Круги при анимации начинают пересекаться, что даёт искомый эффект интерференции.

6. Чтобы transition сработал с градиентной заливкой, нужно задать градиент кастомными свойствами, а переход делать для них, как показано тут: https://stackoverflow.com/a/63848864/14400772