Лаборатория движения

Приёмы, из которых собран этот сайт

Девять живых примеров. Всё работает прямо здесь: наводите, тяните, листайте. Если в системе включено «уменьшить движение», анимации отключатся — это проверено.

Строки из-под маски

Движение, которое объясняет, а не отвлекает

Как сделано: GSAP SplitText (type: lines, mask) + expo.out, stagger 0.09. Сам заголовок остаётся читаемым для скринридеров и при «уменьшить движение».

Магнитные кнопки

ОдинДваТри

Как сделано: gsap.quickTo на x/y по pointermove (инерция 0.6 с). Включается только для мыши и без reduced-motion.

Наклон и блик

Наведите

Как сделано: 3D-наклон через gsap.quickTo (rotationX/Y, perspective 900) и радиальный блик на CSS-переменных, следующий за курсором.

Бегущая строка

Как сделано: Скорость и наклон считаются из ScrollTrigger.getVelocity(): листайте быстрее — строка ускоряется и меняет направление.

Слова по скроллу

Листайте страницу — слова загораются по одному, в такт прокрутке.

Как сделано: SplitText (words) + scrub: непрозрачность слов привязана к положению страницы без собственной математики.

Прожектор

Ведите курсор

Как сделано: Позиция курсора с инерцией пишется в CSS-переменные; два слоя текста и radial-gradient в mask-image. Без мыши текст просто читаем.

Рисующийся контур

Как сделано: stroke-dasharray / stroke-dashoffset по getTotalLength() и timeline со stagger. Наведите курсор, чтобы проиграть заново.

Счётчик

Как сделано: Анимируем число в обычном объекте и пишем в DOM в onUpdate; ease power3.out даёт мягкое замедление.

Пружина

Потяните

Как сделано: Motion: drag с упругим возвратом (bounceStiffness / bounceDamping), whileHover и whileDrag.

Хочу такое на своём сайте