Разработка промо-сайтов с анимациями GSAP и 3D Three.js

Представьте: пользователь заходит на промо-сайт нового продукта, но вместо плавной анимации видит задержки и рывки. LCP превышает 4 с, трёхмерная модель отрисовывается только после повторной загрузки. Это результат игнорирования оптимизации. Наша команда решает эту проблему, сочетая визуальную сложность с производительностью. Мы разрабатываем промо-сайты, которые не просто показывают продукт, а создают историю. Обычные лендинги давно не удивляют — пользователь пролистывает их за секунды. Анимации, 3D, видео и интерактив удерживают внимание на 300% дольше. Наш опыт — более 10 лет в веб-разработке, 50+ реализованных проектов.

Отличие промо-сайта от лендинга

Лендинг ориентирован на конверсию: минимум отвлечений, максимум пути к действию. Промо может конвертировать, но первичная цель — вовлечение, запоминаемость, создание настроения вокруг продукта. Бюджет анимаций и визуальной части значительно выше. Пользователь остаётся дольше — и это ожидаемо. Стоимость проекта рассчитывается индивидуально, но часто окупается ростом узнаваемости.

Технический стек

Промо-сайты — один из немногих контекстов, где оправданы тяжёлые JavaScript-библиотеки для анимаций.

GSAP (GreenSock) — стандарт для scroll-based анимаций и timeline-сценариев. ScrollTrigger плагин позволяет синхронизировать анимацию с позицией скролла:

import { gsap } from 'gsap'; import { ScrollTrigger } from 'gsap/ScrollTrigger'; gsap.registerPlugin(ScrollTrigger); gsap.to('.product-image', { y: -100, scale: 1.2, ease: 'none', scrollTrigger: { trigger: '.product-section', start: 'top center', end: 'bottom top', scrub: 1.5, } }); 

Three.js / R3F (React Three Fiber) — для 3D-элементов. Промо автомобиля, интерактивный 3D-продукт, particle-системы. Требует оптимизации под мобильные: LOD (levels of detail), ограничение FPS, fallback для слабых устройств.

import { Canvas } from '@react-three/fiber'; import { useGLTF, OrbitControls, Environment } from '@react-three/drei'; function ProductModel() { const { scene } = useGLTF('/models/product.glb'); return <primitive object={scene} />; } export function ProductViewer() { return ( <Canvas camera={{ position: [0, 0, 3], fov: 45 }}> <Environment preset="studio" /> <ProductModel /> <OrbitControls enableZoom={false} /> </Canvas> ); } 

Lenis — библиотека для smooth scroll, заменяет нативный скролл на более контролируемый. Часто используется в связке с GSAP ScrollTrigger.

Framer Motion — для React-проектов с менее сложными анимациями. Достаточно для большинства промо с переходами между секциями.

Почему GSAP эффективнее для scroll-based анимаций?

Отметим: как показывает практика, GSAP в 2–3 раза производительнее Framer Motion при сложных scroll-based анимациях — это подтверждают тесты на реальных проектах GreenSock Documentation. Three.js с Draco-сжатием уменьшает размер моделей на 90%.

Типичные блоки промо-сайта

Hero с видео или 3D. Автовоспроизведение видео без звука, muted + playsinline для iOS:

<video autoplay muted loop playsinline poster="/poster.jpg" preload="none" > <source src="/hero.webm" type="video/webm"> <source src="/hero.mp4" type="video/mp4"> </video> 

Scroll storytelling. Каждая секция раскрывается по мере скролла. Технически — pin-секции через ScrollTrigger + синхронизированные timeline:

const tl = gsap.timeline({ scrollTrigger: { trigger: '.story-section', pin: true, start: 'top top', end: '+=300%', scrub: true, } }); tl.from('.chapter-1', { opacity: 0, y: 50 }) .to('.chapter-1', { opacity: 0 }) .from('.chapter-2', { opacity: 0, y: 50 }); 

Интерактивный элемент. Курсор меняет вид, элементы реагируют на mousemove, hotspot на изображении с подсказками. Всё это — функции вовлечения, не конверсии.

Счётчики и динамические данные. Анимированные числа, живые обновления (если продукт/событие актуальны в реальном времени через WebSocket).

Достижение высокой производительности на промо-сайте

Парадокс промо-сайта: он должен быть визуально богатым и при этом грузиться быстро. Методы баланса:

• progressive reveal — загрузка контента по мере скролла, не всего сразу;
• preload критичных ресурсов — hero-видео, первый 3D-ассет;
• defer всего, что не в first screen;
• WebP/AVIF для всех изображений, draco compression для 3D-моделей;
• code splitting — каждая секция как отдельный chunk;
• reduced-motion — отключение анимаций для пользователей с prefers-reduced-motion.

@media (prefers-reduced-motion: reduce) { .animated-element { animation: none; transition: none; } } 

Дополнительно используем window.matchMedia для программного отключения анимаций. Целевой LCP — менее 2.5 с, на практике достигаем 1.8–2.2 с при прогрессивной загрузке.

Мобильная версия промо

Промо-сайты часто разрабатываются с фокусом на десктоп, мобильная версия — упрощённая. Это нормальная практика, если упрощение принято осознанно и зафиксировано в ТЗ. Тяжёлые scroll-based анимации на мобильных работают хуже: производительность ниже, скролл нативный и менее предсказуемый.

Что входит в работу над промо-сайтом?

1. Аналитика и бриф — определение целей, целевой аудитории, ключевых механик.
2. Прототипирование — wireframes сценариев взаимодействия (скролл, клики, анимации).
3. Дизайн-концепция — визуальный стиль, отрисовка ключевых экранов.
4. Фронтенд-разработка — реализация анимаций, интеграция 3D, адаптация под мобильные.
5. Тестирование производительности — проверка LCP, CLS, INP, оптимизация.
6. Деплой и поддержка — размещение на Vercel/Netlify, настройка редиректов, документация.

По запросу подключаем A/B тестирование и интеграцию с CRM. Получите консультацию — наш специалист оценит ваш проект и предложит оптимальные решения.

Срок жизни и поддержка

Промо-сайт события (конференция, запуск продукта) живёт 2–6 месяцев. Это нужно учитывать при выборе инфраструктуры: не стоит поднимать полноценный VPS с CI/CD для страницы, которая работает 3 месяца. Vercel/Netlify с автодеплоем из Git — оптимально.

После завершения кампании: либо редирект на основной домен, либо статический архив (отключение JS, сохранение визуального состояния).

Типичные сроки

Свяжитесь с нами для обсуждения вашего промо-сайта.