Function ScrollRevealDemo

src/demo/TextAnimations/ScrollRevealDemo.jsx:27–227

()

};

const ScrollRevealDemo = () => {
  const containerRef = useRef(null);

  const { props, updateProp, resetProps, hasChanges } = useComponentProps(DEFAULT_PROPS);
  const { enableBlur, baseOpacity, baseRotation, blurStrength } = props;

  const [key, forceRerender] = useForceRerender();

  useEffect(() => {
    const container = containerRef.current;
    if (!container) return;

    const smoothScroll = e => {
      e.preventDefault();
      const delta = e.deltaY || e.detail || e.wheelDelta;
      const scrollAmount = delta * 2;

      gsap.to(container, {
        scrollTop: container.scrollTop + scrollAmount,
        duration: 2,
        ease: 'power3.out',
        overwrite: 'auto'
      });
    };

    container.addEventListener('wheel', smoothScroll, { passive: false });

    return () => {
      container.removeEventListener('wheel', smoothScroll);
    };
  }, []);

  const propData = useMemo(
    () => [
      {
        name: 'children',
        type: 'ReactNode',
        default: '—',
        description: 'The text or elements to be animated. If a string is provided, it will be split into words.'
      },
      {
        name: 'scrollContainerRef',
        type: 'React.RefObject',
        default: 'window',
        description:
          'Optional ref for the scroll container. If provided, GSAP will use this container for scroll triggers; otherwise, it defaults to the window.'
      },
      {
        name: 'enableBlur',
        type: 'boolean',
        default: 'true',
        description: 'Enables the blur animation effect on the words.'
      },
      {
        name: 'baseOpacity',
        type: 'number',
        default: '0.1',
        description: 'The initial opacity value for the words before the animation.'