Эффекты волны и случайного порядка

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

Анимация волны

Эффект волны позволяет объектам изменять свои свойства с задержкой, создавая впечатление движения волны. Основной принцип заключается в использовании свойства stagger, которое задаёт смещение начала анимации для каждого элемента.

gsap.to(".box", {
  y: 50,
  duration: 1,
  stagger: 0.2
});

В этом примере каждый .box начнёт анимацию с разницей в 0.2 секунды. Это создаёт эффект пошагового движения, напоминающий волну.

Настройка кривой волны

Для более плавного и естественного эффекта можно использовать параметр stagger как объект:

gsap.to(".box", {
  y: 50,
  duration: 1,
  stagger: {
    each: 0.1,
    ease: "power2.inOut",
    from: "center"
  }
});

Ключевые моменты:

  • each — временной интервал между стартами анимаций элементов.
  • ease — функция сглаживания движения, что создаёт ощущение плавной волны.
  • from — точка, от которой начинается волна ("start", "center", "end", "random").

Использование "from": "center" создаёт эффект волны, распространяющейся от центра к краям.

Анимация с случайным порядком

GSAP позволяет создавать анимации, где элементы движутся в случайной последовательности. Это достигается с помощью ключевого параметра stagger.from со значением "random":

gsap.to(".box", {
  y: 50,
  duration: 1,
  stagger: {
    each: 0.2,
    from: "random"
  }
});

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

Дополнительные возможности
  • Задержка отдельных элементов: можно указать диапазон случайной задержки с помощью функции:
gsap.to(".box", {
  y: 50,
  duration: 1,
  stagger: function(index, target, list) {
    return Math.random() * 0.5;
  }
});
  • Случайные значения анимации: комбинация stagger и gsap.utils.random позволяет изменять свойства анимации каждого элемента по случайным параметрам:
gsap.to(".box", {
  y: gsap.utils.random(20, 100),
  duration: 1,
  stagger: {
    each: 0.1,
    from: "random"
  }
});

Комбинирование волны и случайного порядка

Иногда требуется создать эффект, где элементы движутся волнообразно, но порядок немного нарушен для живости движения. Это можно реализовать комбинацией stagger с функцией, возвращающей случайные смещения времени:

gsap.to(".box", {
  y: 50,
  duration: 1,
  stagger: {
    each: 0.2,
    from: "center",
    amount: 0.5,
    grid: "auto",
    onStart: function(index, target) {
      return Math.random() * 0.2;
    }
  }
});

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

Настройка кривых и синусоидальные движения

Для имитации настоящей волны движения важно правильно подобрать кривую. GSAP предоставляет множество функций ease:

  • power1.inOut — линейная плавная волна.
  • power2.inOut — более мягкое начало и конец движения.
  • elastic.out — придаёт эффект пружины на вершинах волны.
  • sine.inOut — идеально подходит для синусоидального движения элементов.

Пример синусоидальной волны:

gsap.to(".box", {
  y: 50,
  duration: 2,
  ease: "sine.inOut",
  stagger: {
    each: 0.1,
    from: "start"
  },
  repeat: -1,
  yoyo: true
});

Эта конструкция создаёт бесконечное повторение волны с эффектом возвратно-поступательного движения.

Анимация в сетке

Эффект волны и случайного порядка особенно эффектно смотрится при работе с двумерными сетками элементов. GSAP поддерживает параметр stagger.grid для автоматического расчёта задержек:

gsap.to(".box", {
  y: 50,
  duration: 1,
  stagger: {
    grid: [3, 3], // 3x3 сетка
    from: "center",
    each: 0.1
  }
});
  • grid: [rows, columns] — размеры сетки для расчёта расстояний между элементами.
  • from: "edges" или "center" — задаёт направление распространения волны.

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

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

Оглавление