📌 Друзья, в телеграмме у нас есть канал и отдельный чат, где вы можете задать вопрос по фронтенд-разработке и вам постараются помочь: 💬 Чат: t.me/friendlyFrontendChat ℹ Основной канал: t.me/friendlyFrontend Если вам это интересно, присоединяйтесь, задавайте вопросы и помогайте другим 🙂
Скролл анимацию на чистом css я ждал много лет! Наконец-то вместо тормозных js костылей с кучей глюков есть нормальное нативное средства, которого так не хватало! Теперь кайфую, как и многие дизайнеры/верстальшики.
При моем опыте работы с этим я заметил пару косяков которые мещают этому стать прям мастхэвом. 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. Вывод, для некоторых анимаций это стало проще, но для создания библиотеки это не подходит (только малая часть функций)
Согласен. Годные примеры, спасибо! Но хорошо, что технология в принципе развивается и хотя бы часть задач по нетребовательным анимациям может взять на себя 🙂
@@AleksanderLamkov Это да, дождемся что бы этого хотя бы поддержку завязли, скорее всего после презентации эпла летом. Обычно так они вводят фишки interop согласно графикам прошлых лет, у сафари резко идет совместимость вверх июнь, июль у Лисы с апреля... может скоро будет хотя бы это
@@AleksanderLamkov про последнее правка. Сейчас для одной функций перечитывал документацию, оказывается добавили такую штуку timeline-scope которая позволяет как раз таки при обнаружений родительского контейнера запускать анимацию для дочерних элементов
А вот буквально в конце этого года, может даже уже летом, Сафари подтянутся с обновлением и общий процент браузерной поддержки будет достаточно высоким, чтобы использовать все эти фичи в большинстве современных проектов :)
Спасибо за контент! Но можно как-то сделать, чтобы элементы появлялись не постепенно, а сразу при скролле (ну т.е. если элемент начинает появляться и скролл остановить, то и анимация остановится, а я про то, чтобы анимация продолжилась) И также как сделать, чтобы при скролле вверх эти элементы не уходили снова?
Привет! Кажется, что так сделать нельзя 😕 Возможно в будущем какое-то свойство для этого добавят, а пока что в черновиках CSS обсуждение этого вопроса застряло на этом: github.com/w3c/csswg-drafts/issues/7478
Ну, вот кстати есть определенные лаги с такой шапкой. Я посмотрел на официальном сайте как там реализована подобная шапка и единственное отличие - position: fixed вместо sticky. Я отслеживаю такую проблему, когда доскролил до середины анимации и при движении мышью шапка как-то подергивается
Поддержка на IOS полностью отсутствует :( Можно пожалуйста видео как работать со scroll-timeline.js ( он там каким-то волшебным образом проверяет и работает )
📌 Друзья, в телеграмме у нас есть канал и отдельный чат, где вы можете задать вопрос по фронтенд-разработке и вам постараются помочь:
💬 Чат: t.me/friendlyFrontendChat
ℹ Основной канал: t.me/friendlyFrontend
Если вам это интересно, присоединяйтесь, задавайте вопросы и помогайте другим 🙂
Топ-контент! Спасибо
Скролл анимацию на чистом css я ждал много лет! Наконец-то вместо тормозных js костылей с кучей глюков есть нормальное нативное средства, которого так не хватало! Теперь кайфую, как и многие дизайнеры/верстальшики.
Благодарю. Мне как раз очень нужна была анимация с плавным проявлением картинок. Очень интересно и полезно
Саша, ты как всегда выкатываешь крутую и полезную информацию!!! Самый мой любимый канал!😍
Отдельное спасибо за сайт с примерами. Сэкономит кучу времени.
Благодарочка, вещай ещё!
Спасибо за очередной полезнейший видос с прекрасной подачей инфы!
Спасибо) Попробовал все примеры, выглядит потрясающе :)
Благодарю за классное видео и ценную информацию!
спасибо тебе, добрый человек!
Спасибо большое за познавательный контент 😊
Супер, спасибо за видео
Супер!
Лучший. Благодарю тебя за интересную информацию 👍
Спасибо!
получилось! Спасибо!
ох благодарю. мож пригодится
При моем опыте работы с этим я заметил пару косяков которые мещают этому стать прям мастхэвом.
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.
Вывод, для некоторых анимаций это стало проще, но для создания библиотеки это не подходит (только малая часть функций)
Согласен. Годные примеры, спасибо!
Но хорошо, что технология в принципе развивается и хотя бы часть задач по нетребовательным анимациям может взять на себя 🙂
@@AleksanderLamkov Это да, дождемся что бы этого хотя бы поддержку завязли, скорее всего после презентации эпла летом. Обычно так они вводят фишки interop согласно графикам прошлых лет, у сафари резко идет совместимость вверх июнь, июль у Лисы с апреля... может скоро будет хотя бы это
@@AleksanderLamkov про последнее правка. Сейчас для одной функций перечитывал документацию, оказывается добавили такую штуку timeline-scope
которая позволяет как раз таки при обнаружений родительского контейнера запускать анимацию для дочерних элементов
Будущее наступает)
отличные новости, но будем мы все это юзать через 2-4 года
Либо в обновлениях в июне либо в декабре будет 92% поддержка
Пока не GSAP конечно, но и проц мой не взорвался как при переходе на многие сайты с WOW-эффектом)
Читал где-то про такое. Очень круто конечно, но когда ?? Вот это вопрос -) Всё улучшают, оптимизируют...
А вот буквально в конце этого года, может даже уже летом, Сафари подтянутся с обновлением и общий процент браузерной поддержки будет достаточно высоким, чтобы использовать все эти фичи в большинстве современных проектов :)
Спасибо за контент! Но можно как-то сделать, чтобы элементы появлялись не постепенно, а сразу при скролле (ну т.е. если элемент начинает появляться и скролл остановить, то и анимация остановится, а я про то, чтобы анимация продолжилась)
И также как сделать, чтобы при скролле вверх эти элементы не уходили снова?
Привет! Кажется, что так сделать нельзя 😕 Возможно в будущем какое-то свойство для этого добавят, а пока что в черновиках CSS обсуждение этого вопроса застряло на этом: github.com/w3c/csswg-drafts/issues/7478
Можешь воспользоваться библиотекой animate.css и wow.js
Ну, вот кстати есть определенные лаги с такой шапкой. Я посмотрел на официальном сайте как там реализована подобная шапка и единственное отличие - position: fixed вместо sticky.
Я отслеживаю такую проблему, когда доскролил до середины анимации и при движении мышью шапка как-то подергивается
Хм. Наверняка временные особенности работы новой технологии. Ещё обкатают и пофиксят рано или поздно.
От души!
Я всю голову сломал как в реакте сделать такую шапку с помощью interseption observer так, чтобы повторный рендеринг не вызывать(((((
Поддержка на IOS полностью отсутствует :(
Можно пожалуйста видео как работать со scroll-timeline.js ( он там каким-то волшебным образом проверяет и работает )
Взял на заметку, спасибо за идею!
Он во всех браузерах поддерживается? Просто я видел он гугл и яндекс вроде как не подерживает
Пока только в сафари не работает. В остальных современных браузерах работает. К лету-осени этого года вероятно будет везде.
Safari боль
CSS скрол анимации??? 🤯🤯🤯
Спасибо Вам огромное!