Fade In

Motion

Free, copy-pasteable Tailwind CSS & Framer Motion Fade In component. Accessible, fully responsive, dark-mode ready, and customizable.

On this page

Implementation Usage Directional Fade In Staggered List Props

Smoothly orchestrate the entrance of your content with reliable Tailwind fade in triggers. Offering built-in staggering for lists and precise directional control, these Tailwind CSS reveal animation wrappers ensure your pages load with a controlled, polished rhythm.

Wrap your entire Hero section with a fade-in, or orchestrate the arrival of individual items within a Blog List.

Implementation

"use client";

import React, { useRef } from "react";
import { motion, useInView, Variants } from "framer-motion";

interface FadeInProps {
  children: React.ReactNode;
  direction?: "up" | "down" | "left" | "right" | "none";
  delay?: number;
  duration?: number;
  className?: string;
  distance?: number;
}

export const FadeIn: React.FC<FadeInProps> = ({
  children, direction = "up", delay = 0, duration = 0.5,
  className = "", distance = 24,
}) => {
  const ref = useRef(null);
  const isInView = useInView(ref, { once: true, margin: "-60px" });
  const directionOffset = {
    up: { y: distance }, down: { y: -distance },
    left: { x: distance }, right: { x: -distance }, none: {},
  };

  const variants: Variants = {
    hidden: { opacity: 0, ...directionOffset[direction] },
    visible: {
      opacity: 1, x: 0, y: 0,
      transition: { duration, delay, ease: [0.25, 0.1, 0.25, 1] },
    },
  };

  return (
    <motion.div ref={ref} initial="hidden"
      animate={isInView ? "visible" : "hidden"} variants={variants} className={className}>
      {children}
    </motion.div>
  );
};

Usage

Directional Fade In

Fade Up

This element fades in from below

From Left

Slides in from the left

From Right

Slides in from the right

<FadeIn direction="up">
  <Card>Fade Up</Card>
</FadeIn>
<FadeIn direction="left" delay={0.15}>
  <Card>From Left</Card>
</FadeIn>

Staggered List

Install

Add the component to your project

Import

Bring it into your file

Use

Drop it into your layout

<StaggerFadeIn direction="up" staggerDelay={0.12}>
  <Card>Step 1: Install</Card>
  <Card>Step 2: Import</Card>
  <Card>Step 3: Use</Card>
</StaggerFadeIn>

Props

Prop	Type	Default	Description
`children`	`ReactNode`	—	Content to animate
`direction`	`"up" \| "down" \| "left" \| "right" \| "none"`	`"up"`	Fade direction
`delay`	`number`	`0`	Delay in seconds
`duration`	`number`	`0.5`	Animation duration
`distance`	`number`	`24`	Offset in pixels
`className`	`string`	`""`	Additional CSS classes

Gradient Text

Morphing Text