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

GSAP (GreenSock Animation Platform) предоставляет мощный и гибкий инструментарий для создания анимаций в JavaScript, и правильная организация кода критически важна для поддержки масштабируемых проектов. Один из ключевых аспектов – возможность экспорта и повторного использования анимаций. Это позволяет создавать модульные, легко сопровождаемые компоненты, которые можно применять на разных страницах и проектах.

Экспорт анимаций как функций

Наиболее удобный способ повторного использования анимации – обернуть её в функцию. Такой подход обеспечивает изоляцию анимационного кода и позволяет передавать параметры для настройки.

import gsap from "gsap";

export function fadeIn(element, duration = 1, delay = 0) {
    return gsap.to(element, { opacity: 1, duration, delay });
}

Особенности подхода:

  • element – целевой DOM-элемент или селектор.
  • duration и delay задаются по умолчанию, но могут быть изменены при вызове.
  • Функция возвращает объект анимации (Tween), что позволяет управлять её состоянием вне функции (пауза, повтор и т. д.).

Экспорт через классы

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

export class CardAnimation {
    constructor(cardElement) {
        this.card = cardElement;
        this.tween = null;
    }

    animateIn() {
        this.tween = gsap.fromTo(
            this.card,
            { y: 50, opacity: 0 },
            { y: 0, opacity: 1, duration: 0.5, ease: "power2.out" }
        );
    }

    animateOut() {
        if (this.tween) this.tween.reverse();
    }
}

Преимущества:

  • Инкапсуляция логики анимации.
  • Возможность создавать несколько экземпляров для разных элементов.
  • Управление состоянием анимации через методы (play, reverse, pause).

Создание повторно используемых таймлайнов

GSAP предоставляет объект Timeline, который позволяет объединять несколько анимаций в последовательность. Таймлайны можно экспортировать для многократного применения.

export function createSlideInTimeline(element) {
    const tl = gsap.timeline({ paused: true });
    tl.from(element, { x: -200, opacity: 0, duration: 0.5 })
      .to(element, { scale: 1.05, duration: 0.3 })
      .to(element, { scale: 1, duration: 0.2 });
    return tl;
}

Использование:

import { createSlideInTimeline } from './animations.js';

const myElement = document.querySelector('.my-card');
const tl = createSlideInTimeline(myElement);
tl.play();

Особенности:

  • paused: true позволяет контролировать начало воспроизведения.
  • Таймлайн можно повторно использовать для разных элементов, просто создавая новый экземпляр.
  • Можно комбинировать с другими таймлайнами для создания сложных сцен.

Параметризация анимаций

Для максимальной универсальности экспортируемые функции или классы можно делать параметрическими, позволяя задавать скорость, направления, задержки и easing.

export function bounceIn(element, { duration = 1, ease = "bounce.out", scale = 0.5 } = {}) {
    return gsap.fromTo(
        element,
        { scale: scale, opacity: 0 },
        { scale: 1, opacity: 1, duration, ease }
    );
}
  • Параметры задаются через объект, что повышает читаемость вызова.
  • Можно задавать как опциональные значения, так и обязательные.

Организация модулей анимации

Для масштабных проектов рекомендуется выносить анимации в отдельные модули:

/animations
  fade.js
  slide.js
  bounce.js

Пример структуры:

// fade.js
import gsap from "gsap";

export const fadeIn = (el, duration = 0.5) => gsap.to(el, { opacity: 1, duration });
export const fadeOut = (el, duration = 0.5) => gsap.to(el, { opacity: 0, duration });

// slide.js
import gsap from "gsap";

export const slideIn = (el, x = 100) => gsap.from(el, { x, opacity: 0, duration: 0.5 });
export const slideOut = (el, x = 100) => gsap.to(el, { x, opacity: 0, duration: 0.5 });

Преимущества такой организации:

  • Удобство импорта нужных анимаций.
  • Легкость тестирования отдельных модулей.
  • Возможность масштабирования проекта без увеличения сложности.

Интеграция с компонентными фреймворками

Повторно используемые анимации идеально подходят для React, Vue или Svelte, где можно вызывать экспортированные функции или классы внутри жизненного цикла компонента:

import { fadeIn } from './animations/fade.js';
import { useEffect, useRef } from 'react';

function Card() {
    const ref = useRef(null);

    useEffect(() => {
        fadeIn(ref.current, 1);
    }, []);

    return <div ref={ref} className="card">Контент</div>;
}
  • Анимации остаются модульными и независимыми от структуры компонента.
  • Можно передавать параметры, изменяя поведение анимации для конкретного случая.

Практика повторного использования

  • Создавать функции и классы с параметрами по умолчанию.
  • Всегда возвращать Tween или Timeline для управления анимацией вне функции.
  • Разделять анимации по категориям и типам для удобного импорта.
  • Использовать таймлайны для комплексных сцен и комбинировать их.
  • Поддерживать модульность для легкой интеграции в разные проекты и компоненты.

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

Оглавление