In View

Wrapper that triggers entrance animation when children scroll into the viewport. Powered by framer-motion useInView.

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.

In ViewWrapper that triggers entrance animation when children scroll into the viewport. Powered by framer-motion useInView.

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

type InViewProps = {
  children: React.ReactNode;
  variants?: Variants;
  transition?: Transition;
  once?: boolean;
  className?: string;
};

const defaultVariants: Variants = {
  hidden: { opacity: 0, y: 24 },
  visible: { opacity: 1, y: 0 },
};

const defaultTransition: Transition = { duration: 0.5, ease: "easeOut" };

export function InView({
  children,
  variants = defaultVariants,
  transition = defaultTransition,
  once = true,
  className,
}: InViewProps) {
  const ref = useRef<HTMLDivElement>(null);
  const inView = useInView(ref, { once });

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

Installnpm install framer-motion

Props

Prop	Type	Default	Description
childrenrequired	ReactNode	—	Content to animate
variants	Variants	fade+slide up	Custom framer-motion variants
transition	Transition	0.5s easeOut	Transition config
once	boolean	true	Only animate once
className	string	—	Class applied to wrapper div