Enter

Installation

CLI

npx shadcn@latest add https://satisui.xyz/r/enter.json

Manual

1. Install the following dependencies:

   npm install gsap @gsap/react

   yarn add gsap @gsap/react

   pnpm add gsap @gsap/react

2. Copy and paste the following code into your project.

   'use client';
   
   import { cn } from '@/lib/utils';
   import { useGSAP } from '@gsap/react';
   import gsap from 'gsap';
   import * as React from 'react';
   
   export interface EnterProps {
     /**
      * The React elements to be animated.
      */
     children: React.ReactNode;
     /**
      * Additional CSS classes to apply to the wrapping element.
      */
     className?: string;
     /**
      * The duration of the animation in seconds.
      * @default 1.2
      */
     duration?: number;
     /**
      * The delay before the animation starts, in seconds. Can also be a
      * function for complex staggers.
      * @see https://gsap.com/docs/v3/GSAP/gsap.delayedCall()
      * @default 0
      */
     delay?: gsap.TweenValue;
     /**
      * The initial blur amount in pixels. Set to 0 to disable the blur effect.
      * @default 20
      */
     blurAmount?: number;
     /**
      * The initial vertical offset in pixels. Positive values make the element
      * start from below its final position, negative values from above.
      * @default 0
      */
     y?: number;
     /**
      * The initial scale. `1` means no scaling. `0.8` would mean the element
      * starts at 80% of its final size.
      * @default 1
      */
     scale?: number;
     /**
      * The GSAP easing function to use for the animation, which controls the
      * rate of change over time.
      * @see https://gsap.com/docs/v3/Eases/
      * @default 'power3.out'
      */
     ease?: string;
     /**
      * The ScrollTrigger `start` property. Defines when the animation should
      * begin based on scroll position.
      * @example 'top 80%' // When the top of the element is 80% down the viewport.
      * @example 'top center' // When the top of the element hits the center of the viewport.
      * @see https://gsap.com/docs/v3/Plugins/ScrollTrigger/
      * @default 'top 80%'
      */
     start?: string;
   }
   
   /**
    * A highly dynamic wrapper component that animates its children into the viewport
    * when they scroll into view. Supports animations for opacity, blur, position, and scale.
    */
   export const Enter = ({
     children,
     className,
     duration = 1.2,
     delay = 0,
     blurAmount = 20,
     y = 0,
     scale = 1,
     ease = 'power3.out',
     start = 'top 80%',
   }: EnterProps) => {
     const ref = React.useRef<HTMLDivElement>(null);
   
     useGSAP(
       () => {
         const fromVars: gsap.TweenVars = { opacity: 0 };
         const toVars: gsap.TweenVars = {
           opacity: 1,
           duration,
           delay,
           ease,
           scrollTrigger: {
             trigger: ref.current,
             once: true,
             start,
           },
         };
   
         if (blurAmount > 0) {
           fromVars.filter = `blur(${blurAmount}px)`;
           toVars.filter = 'blur(0px)';
         }
   
         if (y !== 0) {
           fromVars.y = y;
           toVars.y = 0;
         }
   
         if (scale !== 1) {
           fromVars.scale = scale;
           toVars.scale = 1;
         }
   
         gsap.fromTo(ref.current, fromVars, toVars);
       },
       { scope: ref }
     );
   
     return (
       <div ref={ref} className={cn('opacity-0', className)}>
         {children}
       </div>
     );
   };

Usage

Wrap any component or element with Enter to apply a scroll-triggered animation.

import { Enter } from '@/components/ui/enter';

export default function Page() {
  return (
    <div className='flex flex-col gap-8'>
      {/* Default Usage */}
      <Enter>
        <div className='rounded-lg border p-8 text-center'>
          <h2 className='text-xl font-semibold'>
            This element uses the default blur-in effect.
          </h2>
        </div>
      </Enter>

      {/* Customized Usage */}
      <Enter y={50} blurAmount={0} duration={0.8}>
        <div className='rounded-lg border bg-muted p-8 text-center'>
          <h2 className='text-xl font-semibold'>
            This element slides in from the bottom.
          </h2>
        </div>
      </Enter>
    </div>
  );
}

Props