Прекольный видос про новые css анимации

https://youtu.be/jeVNN3mFxOA?si=2_czDJhALFbi9BdA

А если вкратце:

1. View transitions API https://developer.chrome.com/docs/web-platform/view-transitions/

Новое API позволяет создавать анимированный переход между страницами без JS! Пока находится в стадии разработки, но уже можно ограниченно опробовать. Пока поддерживается браузерами в Chrome 111+. Также есть реализация в фреймворках/библиотеках.

2. Scroll driven animation https://developer.chrome.com/articles/scroll-driven-animations/#scroll-driven-animations

Паралакс эффект, анимация прогресса чтения страниц на чистом css! Добавляется два api, Scroll Progress Timeline и View Progress Timeline. В первом api мы отслеживаем скролл относительно контейнера, от 0% до 100%. В View Progress Timeline мы смотрим на относительное положение определенного элемента в контейнере. Для лучшего понимания советую посмотреть доку или на сайте (https://scroll-driven-animations.style/) где есть все примеры и реализация. Поддержка пока тоже на последних версиях хрома 🫡

#css #frontend