Как написать плавную веб-анимацию | ускоряем веб-анимацию | CSS + JS

В видео разберём как добиваться наиболее плавной анимации с помощью свойств CSS и JS.
🏰 Английский YouTube: @webelart_en

Интересные видео по теме:

00:00 введение.
01:05 даём определение анимациям.
01:52 как создаётся анимация в браузере.
04:38 определение плавной анимации.
07:40 реализация плавной анимации.
09:04 animation-friendly css-свойства.
10:56 animation-no-friendly css-свойства.
12:41 как перенести рендеринг на GPU.

На канале я рассматриваю различные темы веб-разработки, на текущий момент: веб-основы, веб-анимации, веб-дизайн.

[deniskotov]

Офигеть. Я в восторге. Это максимально полезное видео. Спасибо🙏💕

[mind]

Кайф спасибо)))) Ждем какие-нибудь интересные кейсы анимаций, паттерны и что-то еще интересное!

[sergeys]

Было бы неплохо рассказать про composition, как происходит вынос на отдельный слой

[kosha]

Спасибо за видео! Сразу исправила в своем проекте анимацию)

[ziejsxc]

А подскажи, пожалуйста, правда ли, что при анимации через js лучше анимировать значение css переменной, чем непосредственно element.style.property = `${value}` ?

[Mike]

у вас есть видео где display:none на чистом js анимируется ? при клике на чтото, появляется и исчезает квадратик например. в интернете есть подобное, но там если быстро нажимать плавность пропадает

[qcictbx]

6:06 а это не совсем правда, все зависит от частоты развертки монитора и установок браузера. В хроме, например, на 144Гц мониторе так и будет 144 кадра в секунду, а следовательно функция raf тоже выполняется 144 раза. Это стоит учитывать, если скорость анимации зависит от числа прошедших кадров.

10:34 понимаю, что background-color просто для примера, но просто замечу, что все его задачи решаются через анимацию opacity какого-то отдельного дива залитым цветом. Кстати даже box-shadow через opacity будет круче, но при условии, что таких элементов на странице будет мало, а то даже невидимые элементы с box-shadow потребляют ресурсы.

13:37 про will-change, его лучше все таки использовать только в том случае, если действительно наблюдается на бенчмарках повышение производительности, иначе неправильное его использование сделает только хуже. Например, чтобы правильно его использовать, нужно добавлять это свойство не изначально, а за некоторое время до старта анимации (например, по ховеру, если анимация будет после клика. На тачах нет ховера, просто как пример), когда уверены, что анимация конкретного одного элемента точно будет. Если добавить по умолчанию, есть риск, что таких элементов будет много, да и браузер зря выделит ресурсы элементу, который не факт что будет анимироваться (про это вы добавили в конце).


Я не придираюсь, просто решил дополнить :) Вы очень крутую тему поднимаете, спасибо большое! Очень мало фронтендеров заморачиваются по поводу плавности анимации, вешают transition: width и в путь. Анимации в вебе очень крутая задача для мозга, когда нужно с одной лишь парой transform+opacity реализовать сложные переходы.

Привет от почти уже бывшего яндексоида бывшему яндексоиду :)

[ЕгорГречкинг]

Хороший канал. Кажется у вас раньше был другой. Вроде смотрел там ролики про git на несколько часов, а может мне кажется.

[AlekseyNaumov_]

В мультипликации используют 12 картинок в секунду. Просто каждую картинку повторяют 2 раза.

[nikitasafonkin]

нехватка ссылки на бесплатную скачку книги )

[agilkerimov]

Спикер интересный, голос приятный и подача материала уверенная. Но к сожалению очень походит на лекцию, практически нету примеров живых, можно вместо того чтобы руками показывать как работает трансформ, написать код и продемонстрировать в браузере. Про перформанс можно показать девтулс.
В любом случае подписался, желаю удачи