эффекты

Раскрытие при скролле

Текст и графика проявляются слева направо через контролируемую кинематографичную маску.

GSAPScrollTrigger

Подробнее и перенос

Здесь собраны живое демо, prompt для генерации похожего решения и готовый React-сниппет для переноса в HTML embed или кастомный блок Tilda.

Prompt для GPT

Готовая формулировка для генерации похожего эффекта

Создай современную веб-анимацию «Раскрытие при скролле» для Next.js и React. Нужен эффект: маскированный reveal текста и изображений для премиальных секций. Используй GSAP, ScrollTrigger, тёмный премиальный стиль, плавные переходы, адаптивную вёрстку и состояние preview для карточки.

React-компонент

Раскрытие при скролле

'use client';

import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import { useEffect, useRef } from 'react';

gsap.registerPlugin(ScrollTrigger);

export function RevealOnScroll() {
  const sectionRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!sectionRef.current) return;

    const items = Array.from(sectionRef.current.querySelectorAll('[data-reveal]'));
    const ctx = gsap.context(() => {
      gsap.fromTo(items, { xPercent: -12, opacity: 0 }, {
        xPercent: 0,
        opacity: 1,
        duration: 1,
        stagger: 0.16,
        ease: 'power3.out',
        scrollTrigger: {
          trigger: sectionRef.current,
          start: 'top 70%',
        },
      });
    }, sectionRef);

    return () => ctx.revert();
  }, []);

  return <div ref={sectionRef}>{/* reveal items */}</div>;
}