Микродвижение иконки избранного на anime.js вместо мгновенного переключения класса

Разбор задачи

Библиотека anime задаёт параметры ключевых кадров декларативно. Ниже — пример нажатия: уменьшенный масштаб затем упругий overshoot без фиксированного тайминга через CSS.

document.querySelectorAll('[data-role=bookmark-toggle]').forEach((btn) => {
  btn.addEventListener('click', () => {
    const svg = btn.querySelector('svg');
    const active = btn.getAttribute('aria-pressed') === 'true';
    anime({
      targets: svg,
      scale: [{ value: 0.92, duration: 90 }, { value: 1.06, duration: 160 }],
      easing: 'easeOutQuad',
    });
    btn.setAttribute('aria-pressed', String(!active));
  });
});

После отправки AJAX в избранное обновляйте класс уже на ответ сервера, чтобы не давать пользователю ложную обратную связь при ошибке сети.

Замечания перед выкладкой

Вносите правки только через среду с бэкапом и понятным diff. Если сниппет идёт в шаблон на Битрикс, проверьте конфликт с уже подключённым jQuery/UI и включите «отложенный» запуск там, где длинный главный файл может обрезать DOMContentLoaded.