📌 Друзья, в телеграмме у нас есть канал и отдельный чат, где вы можете задать вопрос по фронтенд-разработке и вам постараются помочь: 💬 Чат: t.me/friendlyFrontendChat ℹ Основной канал: t.me/friendlyFrontend Если вам это интересно, присоединяйтесь, задавайте вопросы и помогайте другим 🙂

Благодарю за классное видео и ценную информацию!

Благодарю. Мне как раз очень нужна была анимация с плавным проявлением картинок. Очень интересно и полезно

Саша, ты как всегда выкатываешь крутую и полезную информацию!!! Самый мой любимый канал!😍

Спасибо) Попробовал все примеры, выглядит потрясающе :)

Благодарочка, вещай ещё!

получилось! Спасибо!

Отдельное спасибо за сайт с примерами. Сэкономит кучу времени.

Супер, спасибо за видео

Спасибо!

спасибо тебе, добрый человек!

Спасибо большое за познавательный контент 😊

Спасибо Вам огромное!

Супер!

Спасибо за очередной полезнейший видос с прекрасной подачей инфы!

ох благодарю. мож пригодится

Скролл анимацию на чистом css я ждал много лет! Наконец-то вместо тормозных js костылей с кучей глюков есть нормальное нативное средства, которого так не хватало! Теперь кайфую, как и многие дизайнеры/верстальшики.

Будущее наступает)

Пока не GSAP конечно, но и проц мой не взорвался как при переходе на многие сайты с WOW-эффектом)

отличные новости, но будем мы все это юзать через 2-4 года

Либо в обновлениях в июне либо в декабре будет 92% поддержка

Ну, вот кстати есть определенные лаги с такой шапкой. Я посмотрел на официальном сайте как там реализована подобная шапка и единственное отличие - position: fixed вместо sticky. Я отслеживаю такую проблему, когда доскролил до середины анимации и при движении мышью шапка как-то подергивается

При моем опыте работы с этим я заметил пару косяков которые мещают этому стать прям мастхэвом. 1) Для замены анимаций в медиа запросах, необходимо переписать анимацию полностью не только скажем с animation: animate-in linear forwards; на animation: animate-left-in linear forwards. Придется писать все .animate { animation: animate-left-in linear forwards; animation-timeline: view(); animation-range: entry, exit; } 2) Нет поддержки вложенности. Я не могу прописать .animate { animation: animate-left-in linear forwards; animation-timeline: view(); animation-range: entry, exit; &:nth-child(2) {animation-delay: .3s;} &:nth-child(3) {animation-delay: .6s;} &:nth-child(4) {animation-delay: .9s;} &:nth-child(5) {animation-delay: 1.2s;} &:nth-child(6) {animation-delay: 1.5s;} } Придется писать .animate { animation: animate-left-in linear forwards; animation-timeline: view(); animation-range: entry, exit; } .animate:nth-child(2) {animation-delay: .3s;} .animate:nth-child(3) {animation-delay: .6s;} .animate:nth-child(4) {animation-delay: .9s;} .animate:nth-child(5) {animation-delay: 1.2s;} .animate:nth-child(6) {animation-delay: 1.5s;} } Так же функция view не работает как observer в полной мере, что бы по примеру @container я мог обьявить секцию как тригер для начала анимаций всех карточек а не пока конкретная карточка попадет в viewport. Вывод, для некоторых анимаций это стало проще, но для создания библиотеки это не подходит (только малая часть функций)

Читал где-то про такое. Очень круто конечно, но когда ?? Вот это вопрос -) Всё улучшают, оптимизируют...

Лучший. Благодарю тебя за интересную информацию 👍

Спасибо за контент! Но можно как-то сделать, чтобы элементы появлялись не постепенно, а сразу при скролле (ну т.е. если элемент начинает появляться и скролл остановить, то и анимация остановится, а я про то, чтобы анимация продолжилась) И также как сделать, чтобы при скролле вверх эти элементы не уходили снова?

Поддержка на IOS полностью отсутствует :( Можно пожалуйста видео как работать со scroll-timeline.js ( он там каким-то волшебным образом проверяет и работает )

От души!

Я всю голову сломал как в реакте сделать такую шапку с помощью interseption observer так, чтобы повторный рендеринг не вызывать(((((

Он во всех браузерах поддерживается? Просто я видел он гугл и яндекс вроде как не подерживает

CSS скрол анимации??? 🤯🤯🤯

Safari боль