Точки старта и конца: start и end

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

Свойство start

Свойство start определяет начальный момент анимации. В контексте ScrollTrigger, одного из наиболее популярных плагинов GSAP, оно задает точку, в которой анимация начинает проигрываться при скролле страницы. Формат записи может быть следующим:

start: "top center"

Где:

  • top — верхняя граница элемента, относительно которого происходит триггер;
  • center — вертикальная точка на экране или в контейнере, относительно которой вычисляется старт анимации.

Существуют различные комбинации:

  • "top top" — верх элемента совпадает с верхом видимой области;
  • "top bottom" — верх элемента совпадает с низом видимой области;
  • "center center" — центр элемента совпадает с центром видимой области.

Также можно задавать смещения в пикселях или процентах:

start: "top 100px"

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

Свойство end

Свойство end определяет конечный момент анимации. Оно задает, до какого момента или положения будет продолжаться анимация. Аналогично start, его можно записывать через ключевые точки и смещения:

end: "bottom top"

Где:

  • bottom — нижняя граница элемента;
  • top — верх видимой области экрана.

Примеры:

  • "bottom bottom" — нижняя граница элемента совпадает с нижней границей видимой области;
  • "center top" — центр элемента достигает верхней границы экрана.

Использование end совместно с start позволяет контролировать длительность анимации на скролле, делая её зависимой от положения элемента относительно окна просмотра или родительского контейнера.

Комбинирование start и end с временной шкалой

GSAP позволяет использовать start и end не только с ScrollTrigger, но и с классическими таймлайнами (timeline). Например:

gsap.timeline()
  .from(".box", {x: -200, duration: 1})
  .to(".box", {x: 200, duration: 1}, "start+=0.5");

Здесь "start+=0.5" смещает начало второй анимации на 0.5 секунды относительно ключевой точки start временной шкалы. Это позволяет создавать сложные цепочки анимаций с точным управлением последовательностью и задержками.

Относительные и абсолютные значения

Свойства start и end могут быть заданы как абсолютными значениями в пикселях, так и относительными процентами:

start: "top 80%"
end: "bottom 20%"

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

Взаимодействие с scrub

Когда анимация привязана к скроллу с использованием опции scrub, свойства start и end становятся особенно важными. Они определяют интервал скролла, за который анимация будет выполнена:

gsap.to(".box", {
  x: 400,
  scrollTrigger: {
    trigger: ".box",
    start: "top 80%",
    end: "bottom 20%",
    scrub: true
  }
});

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

Использование смещений и функций обратного вызова

start и end поддерживают смещения с отрицательными и положительными значениями, что позволяет запускать анимацию раньше или позже фактической точки элемента:

start: "top 50px",
end: "bottom-=100px"

Формат -=100px сокращает стандартное значение на 100 пикселей. Кроме того, можно использовать функции для динамического расчета позиции:

start: () => window.innerHeight / 2

Это дает возможность адаптировать анимацию к различным размерам экрана и сложным структурам DOM.

Практические рекомендации

  • Старайтесь использовать относительные значения (top, center, bottom) вместо абсолютных пикселей для кросс-платформенной совместимости.
  • Для плавного скролла применяйте scrub: true, чтобы анимация синхронизировалась с прокруткой.
  • Комбинируйте start и end с временной шкалой, чтобы создавать цепочки анимаций с контролируемой последовательностью.
  • Используйте смещения и функции, когда необходимо подстроить анимацию под динамическое содержимое страницы.

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

Оглавление