Мэт Перри — автор библиотек Framer Motion и Moion One — рассказал про особенности и трудности создания плавных анимаций.
Плавные анимации достигаются за счёт оптимизации рендеринга и использования аппаратного ускорения. При оптимизации рендеринга нужно учитывать, что некоторые свойства приводят к перерасчёту раскладки страницы. Но если эти свойства используются в изолированном контексте, например, с
position: absolute, то вполне можно достичь 60 fps. В сети можно найти список этих свойств (CSS Triggers), но он долгое время не обновлялся. Так например, обработка SVG и CSS-свойства filter в Firefox и Chrome уже выносится на GPU, а в Chrome скоро появится поддержка ускорения анимаций clip-path и background-color.Все браузеры для анимаций используют аппаратное ускорение. В Safari оно реализовано с помощью системной библиотеки Core Animation. Она несовместима с Web Animation API, из-за чего в некоторых случаях ускорение может отключаться.
Полезная статья. Рекомендую почитать всем, кто интересуется темой производительности рендеринга.
#performance #rendering
https://motion.dev/guides/performance
