GSAP Timeline — инструмент для идеальной анимации

/* JS */
const ball = document.querySelector('.ball')
const parent = ball.parentElement
const ball_w = ball.offsetWidth
let parent_w = parent.offsetWidth 
gsap.to(ball,{duration: 2, x: parent_w - ball_w, yoyo: true, repeat: -1, ease: 'power2.inOut'})

Это простая анимация для создания которой Timeline не нужен.

/* JS */
const sunset = document.querySelector('#sunset')
let sunset_w = sunset.offsetWidth
/* Создаем Timeline с некоторыми параметрами по умолчанию */
let tl = gsap.timeline({repeat: -1,defaults:{duration: 7, ease: 'linear'}})
/* На Timeline размещаем анимации элементов */
tl
  .to('#sky', {y: '50%'})
  .to('#cloud-1', {x: sunset_w / 2, fill: 'gray'}, '0')  
  .to('#cloud-2', {x: sunset_w / 4, fill: 'gray'}, '0')
  .to('#cloud-3', {x: sunset_w / 8, fill: 'gray'}, '0')
  .to('#plane', {x: -sunset_w * 1.25, y: -sunset_w * .2}, '0')
  .to('#sun', {y: '400%', x: '700%', backgroundColor: '#F54927', scale: 2, duration:6, ease: 'power1.in'}, '1')
  .to('#house', {backgroundColor: '#333', duration:.5}, '3')
  .to('#window', {backgroundColor: 'yellow', duration:.5}, '4')

После некоторой небольшой практики даже довольно сложные анимации с помощью Timeline становится легко и удобно создавать.

Именно это и делает Timeline. Без него пришлось бы вручную задавать задержки (delay) для каждой последующей анимации, что быстро приводит к запутанному и хрупкому коду, который сложно читать и модифицировать. Timeline решает эту проблему, позволяя создавать сложные цепочки и сценарии с чистым и поддерживаемым кодом. Он становится центральной точкой управления, что особенно критично в крупных проектах, над которыми работает команда.

Основные преимущества использования GSAP Timeline:

• Чистота и читаемость кода: логика последовательности анимаций становится линейной и очевидной.
• Точный контроль времени: вы управляете позицией анимации на шкале времени относительно других, а не задавая абсолютные задержки.
• Централизованное управление: вы можете управлять всей последовательностью анимаций как единым объектом: запускать, приостанавливать, перематывать, замедлять или ускорять.
• Гибкость: легко добавлять, менять местами или удалять анимации в середине последовательности без пересчета всех таймингов.
• Повторное использование: созданный timeline можно легко использовать в разных частях проекта или передавать как объект.

Этот объект становится вашим «монтажным столом», на который вы будете добавлять анимации с помощью знакомых методов, таких как .to(), .from() и .fromTo(). Ключевое отличие от их обычного использования заключается в том, что теперь эти методы вызываются не у gsap, а у созданного экземпляра timeline. Давайте рассмотрим простой пример.

<!-- HTML-структура -->
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>

/* Базовые стили для анимируемых элементов */
.box {
  width: 100px;
  height: 100px;
  margin: 10px;
  background-color: #3498db;
  border-radius: 8px;
  opacity: 0; /* Начальное состояние - невидимы */
}

// JavaScript с использованием GSAP Timeline
// 1. Создаем экземпляр временной шкалы
const masterTimeline = gsap.timeline();

// 2. Добавляем анимации на шкалу. Они выполнятся последовательно.
masterTimeline
  .to('.box1', { duration: 1, opacity: 1, x: 200 }) // Шаг 1: box1 появляется и двигается
  .to('.box2', { duration: 0.8, opacity: 1, x: 200 }) // Шаг 2: затем box2...
  .to('.box3', { duration: 1.2, opacity: 1, x: 200 }); // Шаг 3: и наконец box3.

// Вся последовательность управляется через masterTimeline
// masterTimeline.pause(); // Приостановить
// masterTimeline.play(); // Возобновить
// masterTimeline.reverse(); // Проиграть в обратном порядке

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

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

Основные позиционные параметры

• > (или отсутствие параметра): анимация начинается в конце предыдущей добавленной на эту шкалу анимации (поведение по умолчанию).
• <: анимация начинается в начале предыдущей анимации (параллельное выполнение).
• +=N: анимация начинается через N секунд после конца всей шкалы на данный момент.
• -=N: анимация начинается на N секунд раньше конца шкалы (перекрытие).
• "label": анимация начинается в момент временной метки «label».
• "label+=N": анимация начинается через N секунд после метки «label».

Рассмотрим пример с использованием позиционирования:

const complexTimeline = gsap.timeline();

complexTimeline
  // Анимация 1: Квадрат выезжает (длится 1.5 сек)
  .to('.hero-box', { duration: 1.5, x: 300, rotation: 360 }, "start") // Добавляем метку "start"
  // Анимация 2: Начинается ПАРАЛЛЕЛЬНО с анимацией 1 (через 0.2 сек после её начала)
  .to('.title', { duration: 1, opacity: 1, y: 0 }, "start+=0.2")
  // Анимация 3: Начинается сразу ПОСЛЕ анимации 1
  .to('.subtitle', { duration: 0.8, opacity: 1, y: 0 })
  // Анимация 4: Начинается на 0.5 сек РАНЬШЕ, чем закончится анимация 3 (эффект наложения)
  .from('.button', { duration: 0.7, scale: 0, opacity: 0 }, "-=0.5")
  // Анимация 5: Начинается в абсолютной позиции 3 секунды от начала таймлайна
  .to('.badge', { duration: 0.5, y: 20, repeat: 3, yoyo: true }, 3);

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

Управление таймлайном — это то, что делает анимацию интерактивной и интегрированной в логику приложения. Созданный Тimeline — это объект с богатым набором методов и свойств, которые позволяют вам полностью контролировать воспроизведение анимационной последовательности. Вы можете реагировать на действия пользователя, синхронизировать анимацию с другими процессами на странице или создавать нелинейные навигационные сценарии.

Ключевые методы управления таймлайном

1. .play() / .pause(): запуск и приостановка воспроизведения.
2. .restart(): перезапуск таймлайна с начала.
3. .reverse(): воспроизведение в обратном порядке. Если анимация играла вперед, она начнет идти назад с текущей позиции.
4. .seek(time|label): мгновенное перемещение к указанному времени (в секундах) или метке.
5. .timeScale(value): управление скоростью воспроизведения (1 = нормальная скорость, 2 = в два раза быстрее, 0.5 = в два раза медленнее).
6. .addLabel("name", time): добавление метки вручную в указанное время.
7. .call(func, params, position): вызов функции в определенный момент на временной шкале.

Пример интерактивного управления:

// Создаем timeline
const interactiveTimeline = gsap.timeline({ paused: true }); // Создаем ОСТАНОВЛЕННУЮ шкалу

// Настраиваем анимацию
interactiveTimeline
  .to('.panel', { duration: 1, width: 400 })
  .to('.content', { duration: 0.7, opacity: 1, stagger: 0.1 }, "-=0.3");

// Назначаем обработчики событий на кнопки
document.getElementById('playBtn').addEventListener('click', () => interactiveTimeline.play());
document.getElementById('pauseBtn').addEventListener('click', () => interactiveTimeline.pause());
document.getElementById('reverseBtn').addEventListener('click', () => interactiveTimeline.reverse());
document.getElementById('restartBtn').addEventListener('click', () => interactiveTimeline.restart());

// Реакция на скролл (упрощенный пример)
window.addEventListener('scroll', () => {
    const scrolled = window.scrollY / 1000; // Нормализуем значение скролла
    interactiveTimeline.seek(scrolled); // "привязываем" timeline к скроллу
});

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

Это лучшая практика для организации кода. Вы можете создать отдельный timeline для анимации шапки сайта, другой — для появления блока с услугами, а третий — для модального окна. Затем все эти независимые, легко отлаживаемые «микро-сценарии» можно собрать в один главный masterTimeline для централизованного контроля или управлять ими независимо.

Вот как это выглядит на практике:

// 1. Timeline для анимации героя
const heroTimeline = gsap.timeline();
heroTimeline
  .from('.hero-logo', { duration: 1, y: -50, opacity: 0 })
  .from('.hero-title', { duration: 0.8, y: 30, opacity: 0 }, "-=0.4");

// 2. Timeline для анимации галереи (с собственной сложной логикой)
const galleryTimeline = gsap.timeline();
galleryTimeline
  .from('.gallery-item', {
    duration: 1,
    scale: 0,
    opacity: 0,
    stagger: { // Эффект "каскада" для каждого элемента
      amount: 1.5,
      grid: [3, 3], // Указываем сетку 3x3
      from: "center"
    }
  });

// 3. Создаем МАСТЕР-ТАЙМЛАЙН и добавляем в него остальные
const masterTimeline = gsap.timeline();
masterTimeline
  .add(heroTimeline)           // Добавляем таймлайн героя в начало
  .add(galleryTimeline, "+=1") // Добавляем таймлайн галереи через 1 секунду после окончания героя
  .add(footerAnimation, "+=0.5"); // Добавляем еще одну анимацию

// Управляем всем проектом через masterTimeline
// masterTimeline.pause();
// или управляем частями независимо: heroTimeline.play(); galleryTimeline.reverse();

Что обеспечивает такая архитектура

1. Модульность и поддерживаемость: каждый блок анимации изолирован.
2. Повторное использование: таймлайн галереи можно использовать на разных страницах.
3. Масштабируемость: в большой команде разные разработчики могут работать над разными таймлайнами.
4. Эффективную отладку: легко отключать и тестировать отдельные части анимации.

При создании таймлайна вы можете передать объект с настройками в функцию gsap.timeline(). Это позволяет установить глобальные параметры, такие как общая длительность, плавность (easing) по умолчанию, или даже автоматически приостановить таймлайн после создания.

Наиболее полезные опции создания (defaults)

1. defaults: объект, свойства которого будут применяться ко всем анимациям, добавляемым в этот таймлайн (например, { duration: 0.5, ease: "power2.out" }).
2. paused: true: создать таймлайн в приостановленном состоянии.
3. repeat: N, yoyo: true: количество повторов и эффект «йо-йо» для всего таймлайна.
4. onComplete, onStart, onUpdate: функции-обработчики, которые сработают при завершении, старте или обновлении таймлайна.

Пример с настройками:

// Создаем timeline с предустановленными опциями
const efficientTimeline = gsap.timeline({
  defaults: { // Эти значения станут умолчаниями для ВСЕХ анимаций в этом timeline
    duration: 0.7,
    ease: "back.out(1.2)", // Популярный "пружинящий" easing
    opacity: 0 // Все элементы по умолчанию будут появляться (от opacity:0)
  },
  onComplete: () => console.log("Анимация главной сцены завершена!"),
  onStart: () => console.log("Старт главной сцены!")
});

// Теперь при добавлении анимаций можно указывать только отличия
efficientTimeline
  .from('.feature-icon', { x: -50 }) // Длительность 0.7, ease "back.out", появление из прозрачности
  .from('.feature-text', { y: 30 }, "-=0.3") // Начинается чуть раньше окончания предыдущей
  .to('.cta-button', { scale: 1.1, duration: 0.3, repeat: 2, yoyo: true }); // Локально переопределили duration и добавили эффект

// Такой подход делает код лаконичным, а анимации — стилистически единообразными.

Готовы превратить ваш сайт из статичного в живой и захватывающий? Наша веб-студия создает сайты с безупречно плавными анимациями с помощью GSAP Timeline. Мы поможем вам удержать внимание клиентов, подчеркнуть ключевые преимущества и вывести пользовательский опыт на новый уровень. Закажите современный, динамичный сайт или отдельный анимированный компонент у нас — и ваш проект заиграет по-новому!