Анимации в Astro: GSAP, Framer Motion и CSS-решения

Как добавить плавные переходы без вреда для производительности

Одна из сильных сторон Astro — скорость загрузки страниц благодаря минимальному JavaScript. Но как быть с анимациями, которые обычно требуют JS?

В этой статье разберём несколько способов добавить анимации в Astro-проект:

• CSS-анимации (производительность, zero-JS).
• GSAP (мощная библиотека для сложных анимаций).
• Framer Motion (удобный React-инструмент).

1. CSS-анимации: самый лёгкий способ

Подходят для базовых эффектов (появление, fade-in, hover).

Пример: плавное появление элемента

<style>
  .fade-in {
    opacity: 0;
    animation: fadeIn 0.5s ease-out forwards;
  }

  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }
</style>

<div class="fade-in">Привет, мир!</div>

Плюсы:

• Нет JavaScript → идеально для Astro.
• Высокая производительность (аппаратное ускорение).

Минусы:

• Нет сложных сценариев (например, анимация по скроллу).

2. GSAP: профессиональные анимации

GSAP — мощная библиотека для сложных анимаций.

Установка и использование

npm install gsap

Пример: анимация при загрузке

---
import { onMount } from 'astro/components';
import gsap from 'gsap';

onMount(() => {
  gsap.from(".box", { 
    opacity: 0, 
    y: 50, 
    duration: 1 
  });
});
---

<div class="box">Анимируем через GSAP!</div>

Важно! Используйте client:load для загрузки GSAP только на клиенте:

<script client:load>
  // Код GSAP
</script>

Оптимизация:

• Подключайте gsap-core (минимальная версия).
• Используйте will-change в CSS для сложных элементов.

3. Framer Motion: анимации для React-компонентов

Если ваш проект использует React, Framer Motion — отличный выбор.

Установка

npm install framer-motion

Пример: анимация кнопки

---
import { motion } from 'framer-motion';
---

<motion.button
  initial={{ opacity: 0 }}
  animate={{ opacity: 1 }}
  transition={{ duration: 0.5 }}
  whileHover={{ scale: 1.05 }}
  client:load
>
  Нажми меня
</motion.button>

Плюсы:

• Простой синтаксис.
• Готовые эффекты (например, параллакс).

Минусы:

• Только для React.
• Добавляет вес JS-бандла.

4. Анимации по скроллу (ScrollTrigger)

Для анимаций, запускаемых при прокрутке, используйте GSAP + ScrollTrigger.

Пример

---
import { onMount } from 'astro/components';
import gsap from 'gsap';
import ScrollTrigger from 'gsap/ScrollTrigger';

onMount(() => {
  gsap.registerPlugin(ScrollTrigger);

  gsap.to(".scroll-element", {
    x: 100,
    scrollTrigger: {
      trigger: ".scroll-element",
      start: "top 80%",
      toggleActions: "play none none none"
    }
  });
});
---

<div class="scroll-element">Этот элемент двигается при скролле</div>

5. Оптимизация анимаций

Чтобы анимации не тормозили:

1. Используйте will-change для анимируемых элементов:

   .animated {
     will-change: transform, opacity;
   }

2. Избегайте анимаций свойств, влияющих на рефлоу (например, width, height). Лучше transform и opacity.
3. Отключайте анимации на слабых устройствах:

   if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
     gsap.set(".element", { opacity: 1 }); // Отключаем анимации
   }

Вывод: что выбрать?

• CSS — для простых эффектов без JS.
• GSAP — для сложных анимаций и скролл-эффектов.
• Framer Motion — если проект на React.

Главное правило в Astro: подключайте JS-анимации выборочно с client:load или client:idle, чтобы не навредить скорости загрузки.

А какие библиотеки для анимаций используете вы? Делитесь в комментариях! 🚀

P.S. Если хотите глубже разобрать конкретный кейс (например, анимированный баннер или параллакс), пишите — сделаем отдельный гайд!