Reveal on Scroll

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

GSAPScrollTrigger

Готовый сниппет для переноса

У каждой демки есть React-компонент, который можно скопировать и адаптировать под HTML embed или кастомный блок в Tilda. Библиотека собрана Luneka Lab как showroom motion-подходов для клиентских сайтов.

Написать нам Работать с нами

Назад в библиотеку

Загрузка сцены

React component

Reveal on Scroll

'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>;
}