Аниме вектор и в обложках объектов

Используйте интерактивную SVG-анимацию для улучшения взаимодействия с пользователем двигаясь в стандартах лучших практик адаптивного веб-дизайна.

Интерактивная анимация SVG превратит ваше приложение в инструмент, обеспечивающий удержание пользователей и укрепляющий лояльность к бренду.

До 90% современных потребителей ожидают, что приложения и сайты, которые они посещают, будут иметь интерактивный дизайн . Этот поведенческий паттерн заставил веб-дизайнеров отказаться от тяжелых и зависящих от разрешения растров и перейти к использованию SVG-файлов, ориентированных на будущее.

Потенциальная выгода от использования интерактивных анимаций просто поразительна! Вы можете создать захватывающий и запоминающийся цифровой пользовательский опыт без негативного влияния на производительность страницы*.

Микровзаимодействия, стимулирующие вовлеченность

Микровзаимодействия — это тонкая обратная связь, которая позволяет пользователям узнать, что их действия распознаются и выполняются вашей веб-страницей. Они поощряют участие, потому что имитируют человеческое взаимодействие, действуя как друг, когда кивают и улыбаются, подтверждая, что видят вас.

Эти микровзаимодействия могут быть такими же тонкими, как кнопка «оплатить», превращающаяся в галочку при нажатии. Но они также могут быть такими же яркими, как всплывающие конфетти, когда пользователь наводит курсор на кнопку «подписаться».

Увеличение среднего времени на странице

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

*Минусы

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

Чтобы выполнять только один  анимированный объект в видимой части экрана,  рекомендуется применять Intersection Observer API. Векторные анимации могут быть реализованы разными способами, поэтому самый простой вариант просто CSS: display:none;   например:

<script> 
 function isinviewportSVG() {
    const inViewport = (entries, observer) => {
       entries.forEach(entry => {
          entry.target.classList.toggle("is-inViewport", entry.isIntersecting);
          if (entry.target.classList.contains("is-inViewport")) {
             entry.target.classList.remove("none");
          } else {
             entry.target.classList.add("none");
          }
       });
    };
    const Obs = new IntersectionObserver(inViewport);
    const obsOptions = {};
    const ELs_inViewport = document.querySelectorAll("[data-inviewport]");
    ELs_inViewport.forEach(EL => {
       Obs.observe(EL, obsOptions);
    });
 }
 document.addEventListener("DOMContentLoaded", isinviewportSVG); 
 </script>
 <svg data-inviewport="svganimated" class="none"> ... </svg>