Чистый CSS для анимации или gsap?

Question

[Сергей Шилов]

Добрый день! Делаю постоянно разную сложную (для процессора) анимацию, там и blur и shadow, и, разумеется, есть микрофризы и фреймрейт скачет где-то. Стоит ли в таких случаях полностью переходить на js-движок типа GSAP ?

Comments

[Hyubert]

Не поможет, CSS быстрее JS.
Можете попробовать оптимизировать свою css анимацию, например использовать свойство will-change или виносить на новый слой перенося перерисовку на GPU (не плохая статья)
А если хотите достичь реальной производительности то вам нужно смотреть в сторону webGL в частности на написание ваших компонентов шейдерами (glsl)

Answer 1

[Ivan Bogachev]

есть микрофризы и фреймрейт скачет где-то. Стоит ли в таких случаях полностью переходить на js-движок типа GSAP ?

Важно понимать, что GSAP, Anime.js или еще что-то похожее - это инструменты, которые не приносят ничего принципиально нового в плане технологий. Они просто дают удобный интерфейс, через который мы можем менять значения свойств CSS или каких-то атрибутов SVG. Не более того. Соответственно если у вас есть нормально написанная анимация на чистом CSS/JS и она тормозит, то GSAP ее особо не ускорит.

есть микрофризы и фреймрейт скачет

Если есть проблемы с текущими анимациями, то стоит проверить, что:
- Везде используется transform, а не изменения width, height, top, bottom, margin, background-position и.т.д.
- По возможности не запускается более одной CSS-анимации в единицу времени.
- Все js-анимации собраны в один requestAnimationFrame.
- Все CSS/SVG фильтры по возможности заменены на шейдеры. Советую почитать введение в эту тему и еще примеры.
- Изменение теней в анимациях по возможности заменено на появление псевдоэлементов с такими фонами.
- CSS-свойство will-change используется по назначению.

Comments

[Сергей Шилов]

Разумеется все трансформации проходят от transform, однако, не заметил существенной оптимизации от использования will-change.

Шейдеры не всегда выгодно использовать, особенно, когда речь идет о text-shadow, это не универсально, но блюр попробовать можно.

Спасибо, что дали понимание!