Выбор библиотеки, пять главных паттернов и правила, без которых скролл-анимации тормозят или ломаются.
Замените фрагменты в квадратных скобках своими данными и вставьте промпт в чат с ИИ.
Значения сразу появятся в превью, коде и при копировании.
Ты — эксперт по анимациям, привязанным к скроллу. Реализуй: [ЭФФЕКТ — например, появление карточек, параллакс, закреплённая секция]. Проект: [VANILLA JS / REACT / NEXT.JS], элементы: [СЕЛЕКТОРЫ ИЛИ КОМПОНЕНТЫ]. Выбор библиотеки: - Vanilla JS, Vue, закрепление секций, горизонтальный скролл, сложные таймлайны — GSAP + ScrollTrigger; - React и Next.js в декларативном стиле, появление при входе в зону видимости — Motion (пакет motion, импорт из motion/react). Объясни выбор одной фразой. Паттерны на выбор: 1. Появление при входе: opacity 0 → 1, сдвиг на 40–50 px, каскад 0,1–0,15 с. 2. Привязка к скроллу (scrub): масштаб и прозрачность картинки первого экрана по мере прокрутки. 3. useScroll + useTransform в Motion: параллакс по прогрессу секции. 4. Закреплённый таймлайн: pin, scrub, end через +=200%. 5. Прогресс-бар по scrollYProgress. Обязательные правила: - GSAP: регистрируй ScrollTrigger до использования; при scrub — ease: 'none'; в React — хук useGSAP из @gsap/react, а не голый useEffect; markers только в разработке. - Motion: результат useTransform передавай в style элемента motion.*; в Next.js — 'use client' в файлах с хуками. - Анимируй только transform и opacity, не width, height и box-shadow. - Всегда учитывай prefers-reduced-motion: отключай параллакс и закрепление, оставляй мгновенное появление. - Анимация усиливает контент, а не отвлекает от него. Дай готовый код, команду установки пакетов и 2–3 значения, которые стоит подстроить.
```text Ты — эксперт по анимациям, привязанным к скроллу. Реализуй: [ЭФФЕКТ — например, появление карточек, параллакс, закреплённая секция]. Проект: [VANILLA JS / REACT / NEXT.JS], элементы: [СЕЛЕКТОРЫ ИЛИ КОМПОНЕНТЫ]. Выбор библиотеки: - Vanilla JS, Vue, закрепление секций, горизонтальный скролл, сложные таймлайны — GSAP + ScrollTrigger; - React и Next.js в декларативном стиле, появление при входе в зону видимости — Motion (пакет motion, импорт из motion/react). Объясни выбор одной фразой. Паттерны на выбор: 1. Появление при входе: opacity 0 → 1, сдвиг на 40–50 px, каскад 0,1–0,15 с. 2. Привязка к скроллу (scrub): масштаб и прозрачность картинки первого экрана по мере прокрутки. 3. useScroll + useTransform в Motion: параллакс по прогрессу секции. 4. Закреплённый таймлайн: pin, scrub, end через +=200%. 5. Прогресс-бар по scrollYProgress. Обязательные правила: - GSAP: регистрируй ScrollTrigger до использования; при scrub — ease: 'none'; в React — хук useGSAP из @gsap/react, а не голый useEffect; markers только в разработке. - Motion: результат useTransform передавай в style элемента motion.*; в Next.js — 'use client' в файлах с хуками. - Анимируй только transform и opacity, не width, height и box-shadow. - Всегда учитывай prefers-reduced-motion: отключай параллакс и закрепление, оставляй мгновенное появление. - Анимация усиливает контент, а не отвлекает от него. Дай готовый код, команду установки пакетов и 2–3 значения, которые стоит подстроить. ```
{
"messages": [
{
"role": "user",
"content": "Ты — эксперт по анимациям, привязанным к скроллу. Реализуй: [ЭФФЕКТ — например, появление карточек, параллакс, закреплённая секция].\n\nПроект: [VANILLA JS / REACT / NEXT.JS], элементы: [СЕЛЕКТОРЫ ИЛИ КОМПОНЕНТЫ].\n\nВыбор библиотеки:\n- Vanilla JS, Vue, закрепление секций, горизонтальный скролл, сложные таймлайны — GSAP + ScrollTrigger;\n- React и Next.js в декларативном стиле, появление при входе в зону видимости — Motion (пакет motion, импорт из motion/react).\nОбъясни выбор одной фразой.\n\nПаттерны на выбор:\n1. Появление при входе: opacity 0 → 1, сдвиг на 40–50 px, каскад 0,1–0,15 с.\n2. Привязка к скроллу (scrub): масштаб и прозрачность картинки первого экрана по мере прокрутки.\n3. useScroll + useTransform в Motion: параллакс по прогрессу секции.\n4. Закреплённый таймлайн: pin, scrub, end через +=200%.\n5. Прогресс-бар по scrollYProgress.\n\nОбязательные правила:\n- GSAP: регистрируй ScrollTrigger до использования; при scrub — ease: 'none'; в React — хук useGSAP из @gsap/react, а не голый useEffect; markers только в разработке.\n- Motion: результат useTransform передавай в style элемента motion.*; в Next.js — 'use client' в файлах с хуками.\n- Анимируй только transform и opacity, не width, height и box-shadow.\n- Всегда учитывай prefers-reduced-motion: отключай параллакс и закрепление, оставляй мгновенное появление.\n- Анимация усиливает контент, а не отвлекает от него.\n\nДай готовый код, команду установки пакетов и 2–3 значения, которые стоит подстроить."
}
]
}