**Сделано с GSAP: гравитационный след за курсором мыши**

В статье показан интерактивный эффект: изображения появляются рядом с курсором и ведут себя как объекты под “гравитацией”.
Главная идея — после появления картинка падает к нижней границе окна, подпрыгивает и затем исчезает.
Для эффекта используется простая разметка: в контейнер .codrops_mwg заранее добавляются нужные изображения.
Сами картинки в CSS скрываются, чтобы они были загружены заранее, но не мешали интерфейсу.
Такой подход позволяет избежать задержки при создании элементов скриптом: DOM уже содержит изображения, просто они невидимы.

Далее JavaScript собирает все src изображений в массив images, чтобы быстро подставлять нужную картинку при генерации.
Событие mousemove отслеживает перемещение мыши по осям X и Y и накапливает “пройденную дистанцию” в переменной incr.
Когда incr превышает порог (адаптированный под ширину окна: window.innerWidth / 8), вызывается функция создания нового изображения.
В функцию передаются координаты появления и “дельты” движения (deltaX, deltaY), чтобы картинка дрейфовала в направлении, в котором двигался курсор.
Также учитывается прокрутка страницы: используется e.clientY - root.getBoundingClientRect().top, чтобы корректно вычислять позицию относительно вьюпорта.

В createMedia(x, y, deltaX, deltaY) создаётся img, задаётся src, и элемент добавляется в DOM.
Есть защита от визуальных артефактов: если курсор слишком близко к низу окна (y > H - 200), создание пропускается.
Для анимации используется gsap.timeline(): по завершении таймлайна элемент удаляется из DOM.
Сначала картинка “появляется” с упругим (elastic) эффектом и небольшими случайными вариациями масштаба/поворота.
Затем параллельно запускаются твины: горизонтальный дрейф (x += deltaX * 2) и вертикальное падение до низа экрана (через yPercent и scale).
После удара о “пол” происходит подпрыгивание: добавляется дополнительный горизонтальный сдвиг и выполняется откат по yPercent с динамической интенсивностью back.in(...), зависящей от высоты старта.

Если менять случайные параметры или подбирать другие easing-функции GSAP, можно получить разные характеры “пружинящих” падений.
В целом пример демонстрирует, как из простого отслеживания движения курсора сделать эффект с физически похожим поведением и аккуратной очисткой DOM.

Оригинал статьи: Made With Gsap: Building a Fun Gravity-Based Mouse Trail | Codrops