Fade Up

Fades content upward into view when it enters the viewport. Fires once. Composable with any layout.

Use and inspectUse this when the motion supports the surrounding content. Connect callbacks and state to your app, keep the reset preview as a local demonstration, and add a reduced-motion fallback for movement or looping. The preview is synthetic; it does not call a backend.Next: inspect the source below and replace the demo inputs with your own data.

Fade UpFades content upward into view when it enters the viewport. Fires once. Composable with any layout.

"use client";
import { motion, useInView } from "framer-motion";
import { useRef } from "react";

type FadeUpProps = {
  children: React.ReactNode;
  delay?: number;
  distance?: number;
  duration?: number;
};

export function FadeUp({
  children,
  delay = 0,
  distance = 24,
  duration = 0.5,
}: FadeUpProps) {
  const ref = useRef(null);
  const isInView = useInView(ref, { once: true, margin: "-40px" });

  return (
    <motion.div
      ref={ref}
      initial={{ opacity: 0, y: distance }}
      animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: distance }}
      transition={{ duration, delay, ease: [0.25, 0.46, 0.45, 0.94] }}
    >
      {children}
    </motion.div>
  );
}

Installnpm install framer-motion

Props

Prop	Type	Default	Description
childrenrequired	ReactNode	—	Content to animate
delay	number	0	Animation delay in seconds
distance	number	24	Vertical offset in px before animating
duration	number	0.5	Animation duration in seconds