Function ScrollFloatDemo

src/demo/TextAnimations/ScrollFloatDemo.jsx:23–186

()

};

const ScrollFloatDemo = () => {
  const containerRef = useRef(null);
  const { props, updateProp, resetProps, hasChanges } = useComponentProps(DEFAULT_PROPS);
  const { stagger, duration } = 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 content to animate. If a string, it will be split into individual characters.'
      },
      {
        name: 'scrollContainerRef',
        type: 'RefObject<HTMLElement>',
        default: 'window',
        description: 'Optional ref to the scroll container. Defaults to window if not provided.'
      },
      {
        name: 'containerClassName',
        type: 'string',
        default: '""',
        description: 'Additional Tailwind classes for the container element.'
      },
      {
        name: 'textClassName',
        type: 'string',
        default: '""',
        description: 'Additional Tailwind classes for the text element.'
      },
      {