like-a-boss, в свой проект решил добавить данную анимацию, но таких элементов на одной странице достаточно много, они заметно тормозят сайт. По коду там не велосипед, всё сделано при помощи gsap, по идеи всё должно быть максимально оптимизировано с их стороны (во всяком случае так писали на форумах). Решил почитать как быть в данной ситуации, как оптимизировать анимации, и было найдено одно подходящее решение, это останавливать движение кляксы когда она не в поле видимости, поэтому я тестирую какой метод остановки лучше всего подойдёт (т.е. меньше всего нагружает CPU). В gsap для tweenline много методов остановки анимаций, и они по разному влияют на загруженность CPU. Я как-то читал про свойства, но в данном случае меняется значения SVG
like-a-boss, вкладка Performance monitor показывает какую нагрузку оказывает только данная страница?
P.S.: Изначально не было данной вкладки, поэтому и возник вопрос (гуглить пробовал, даже побывал на сайте гугла про DevTools. Возможно, плохо гугли, не спорю). Вообще, первый раз тестирую анимации, т.к. они оказали ощутимую нагрузку на пк
Виталий Столяров, я уже нашёл решение, но всё равно поясню. Если Вы посмотрите, то окружности помимо изменения размера, ещё имею эффект волны вдоль длины окружности
hzzzzl, можете посоветовать статью, где расскажут про анимации. На данный момент, я могу сделать анимации при помощи CSS (на чистом, незамороченном CSS достаточно сложно сделать что-то реально крутое), JS (тут без библиотек никуда, но в большинстве случаев, возможности которые дают библиотеки не подходят. Например, если смотреть анимации на Dribbble), и знаю ещё один вариант: делаешь анимацию в Adobe After Effects, потом в bodymovin и получаешь 2 файла (html и JSON), которые вставляешь на сайт, но не понятно как управлять этим всем по времени, оно там зацикливается и всё. Хочется листать Dribbble, видеть крутые анимации и понимать, что ты знаешь, как это сделать. Знаю, что лучше использовать что-то готовое, т.к. в большинстве случаев, оно будет работать в разы стабильнее, но всё же...
