Методы gsap.from() и gsap.fromTo()

Методы GSAP gsap.from() и gsap.fromTo() используются для анимации свойств объектов, начиная с определённых значений или перехода между двумя точками. Они являются частью ядра библиотеки GSAP и предоставляют гибкий контроль над анимациями в JavaScript.

Метод gsap.from()

Метод gsap.from() позволяет анимировать элемент от заданного состояния к текущему значению CSS. Основная идея заключается в том, что начальные значения задаются явно, а конечные значения автоматически берутся из текущего состояния элемента в DOM.

Синтаксис:

gsap.from(target, {duration: 1, x: 100, opacity: 0});

Параметры:

  • target – селектор, DOM-элемент или массив элементов, которые будут анимироваться.
  • duration – длительность анимации в секундах.
  • свойства CSS/JS – значения, от которых начинается анимация (например, x, y, opacity, scale).

Примеры применения:

  1. Анимация появления элемента слева:
gsap.from(".box", {duration: 1.5, x: -200, opacity: 0});

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

  1. Анимация масштаба при появлении:
gsap.from(".circle", {duration: 2, scale: 0, ease: "elastic.out(1, 0.5)"});

Элемент увеличивается от масштаба 0 до исходного размера с эффектом пружины.

Особенности gsap.from():

  • Начальное состояние не сохраняется после анимации — после завершения элемент остаётся в своем обычном положении.
  • Можно комбинировать с stagger для последовательного появления группы элементов:
gsap.from(".item", {duration: 1, y: 50, opacity: 0, stagger: 0.2});

Метод gsap.fromTo()

Метод gsap.fromTo() предоставляет полный контроль над анимацией, позволяя явно указать начальные и конечные значения свойств. Этот метод полезен, когда необходимо анимировать элемент из одного состояния в другое, не зависящее от текущих значений в DOM.

Синтаксис:

gsap.fromTo(target, 
    {x: 0, opacity: 0},  // from
    {x: 300, opacity: 1, duration: 2}  // to
);

Параметры:

  • target – селектор или элемент.
  • fromVars – объект начальных свойств анимации.
  • toVars – объект конечных свойств анимации, включая duration, ease, stagger и другие опции.

Примеры применения:

  1. Анимация перемещения и вращения:
gsap.fromTo(".square", 
    {x: 0, rotation: 0}, 
    {x: 400, rotation: 360, duration: 3, ease: "power2.inOut"}
);

Элемент перемещается вправо и одновременно вращается на 360 градусов с плавным ускорением и замедлением.

  1. Появление с изменением прозрачности и масштаба:
gsap.fromTo(".button", 
    {opacity: 0, scale: 0.5}, 
    {opacity: 1, scale: 1, duration: 1, ease: "back.out(1.7)"}
);

Элемент постепенно появляется, увеличивая размер с эффектом «выбрасывания».

Особенности gsap.fromTo():

  • Полный контроль над начальным и конечным состоянием, независимо от текущих стилей элемента.
  • Позволяет использовать те же свойства анимации, что и gsap.to() и gsap.from(), включая delay, stagger, repeat и yoyo.
  • Идеально подходит для сложных последовательностей анимаций, где начальное состояние элемента может быть динамическим или изменяться в процессе выполнения скрипта.

Сравнение gsap.from() и gsap.fromTo()

Характеристика gsap.from() gsap.fromTo()
Начальное значение Задаётся явно Задаётся явно
Конечное значение Берётся из текущего состояния элемента Задаётся явно
Применение Простые анимации появления Полный контроль для сложных анимаций
Использование в последовательностях Подходит, но зависит от текущего состояния Надёжно для точных эффектов

Дополнительные советы

  • Комбинация с Timeline: Оба метода можно использовать внутри gsap.timeline() для создания сложных анимаций с синхронизацией:
const tl = gsap.timeline({defaults: {duration: 1}});
tl.from(".header", {y: -50, opacity: 0})
  .from(".content", {x: -200, opacity: 0}, "-=0.5")
  .fromTo(".footer", {y: 50, opacity: 0}, {y: 0, opacity: 1});
  • Управление easing: Для плавности анимаций рекомендуется использовать стандартные кривые ease (power1, power2, elastic, bounce и другие), которые работают одинаково в from и fromTo.
  • Stagger и повтор: Внутри методов можно использовать stagger, repeat и yoyo для создания более выразительных анимационных эффектов на группах элементов.

Методы gsap.from() и gsap.fromTo() обеспечивают точное управление анимацией объектов на странице, позволяя задавать начальные состояния, изменять свойства плавно и комбинировать их в последовательности для сложных визуальных эффектов.

Оглавление