Scroll Animation Text

'use client';
import { ScrollAnimation } from '@/components/ui/scroll-animation';
import React from 'react';

function TextScroll() {
  return (
    <section>
      <div className='h-[500px] grid place-content-center'>
        <h1 className='text-6xl font-semibold text-center py-8'>Scroll Down 👇 </h1>
      </div>
      <div className='py-2'>
        <div>
          <ScrollAnimation
            direction='left'
            viewport={{ amount: 0.5, margin: '0px 0px 0px 0px' }}
            className='text-6xl text-left py-44 2xl:max-w-xl max-w-lg'
          >
            <p>Take a glance over to the left side.</p>
          </ScrollAnimation>

          <ScrollAnimation
            direction='right'
            viewport={{ amount: 0.5, margin: '0px 0px 0px 0px' }}
            className='text-6xl text-right py-44 2xl:max-w-xl max-w-lg ml-auto'
          >
            <p>Now shift your eyes to the right side.</p>
          </ScrollAnimation>

          <ScrollAnimation
            viewport={{ amount: 0.5, margin: '0px 0px 0px 0px' }}
            className='text-6xl max-w-md mx-auto text-center py-44 2xl:max-w-xl'
          >
            <p>And finally, don’t miss what’s waiting below.</p>
          </ScrollAnimation>
        </div>
      </div>
    </section>
  );
}

export default TextScroll;

'use client';

import { cn } from '@/lib/utils';
import { HTMLMotionProps, motion } from 'motion/react';
import type React from 'react';

type Direction = 'up' | 'down' | 'left' | 'right';
type AsTag =
  | 'div'
  | 'span'
  | 'h1'
  | 'h2'
  | 'h3'
  | 'a'
  | 'p'
  | 'section'
  | 'figure'
  | 'button'
  | 'article';

const generateVariants = (direction: Direction) => {
  const axis = direction === 'left' || direction === 'right' ? 'x' : 'y';
  const value = direction === 'right' || direction === 'down' ? 20 : -20;

  return {
    hidden: { filter: 'blur(10px)', opacity: 0, [axis]: value },
    visible: {
      filter: 'blur(0px)',
      opacity: 1,
      [axis]: 0,
      transition: {
        duration: 0.7,
        ease: 'easeOut',
      },
    },
  };
};

const defaultViewport = {
  once: true,
  amount: 0.3,
  margin: '0px 0px -200px 0px',
};

interface ScrollElementProps {
  children: React.ReactNode;
  className?: string;
  variants?: {
    hidden?: any;
    visible?: any;
  };
  viewport?: {
    amount?: number;
    margin?: string;
    once?: boolean;
  };
  delay?: number;
  direction?: Direction;
  as?: AsTag;
  [key: string]: any; // Allow any additional props
}

export function ScrollAnimation({
  children,
  className,
  variants,
  viewport = defaultViewport,
  delay = 0,
  direction = 'down',
  as: Component = 'div',
  ...props
}: ScrollElementProps) {
  const baseVariants = variants || generateVariants(direction);
  const modifiedVariants = {
    hidden: baseVariants.hidden,
    visible: {
      ...baseVariants.visible,
      transition: {
        ...baseVariants.visible.transition,
        delay,
      },
    },
  };

  const MotionComponent = motion[Component] as typeof motion.div;

  return (
    <MotionComponent
      whileInView='visible'
      initial='hidden'
      variants={modifiedVariants}
      viewport={viewport as any}
      className={cn(className)}
      {...props}
    >
      {children}
    </MotionComponent>
  );
}