In View
Easily animate elements when they come into view. You can apply animations to elements when they enter the viewport, or when they are fully visible.
Examples
Basic in view
Craft beautiful animated components with Motion-Primitives. Designed for developers and designers. The library leverages the power of Framer Motion, with intuitive APIs that simplifies creating complex animations for any project. Start building more dynamic interfaces today.
Basic in view with margin option
Athletics. Watch running, jumping, and throwing events. Athletes compete in many different activities.
Swimming. See swimmers race in water. They use different styles to swim fast and win medals.
Gymnastics. Gymnasts perform amazing flips and jumps. They show strength and balance in their routines.
In view with images and margin option
Images are from cosmos - oui are one ::
Code
'use client';
import { ReactNode, useRef } from 'react';
import {
motion,
useInView,
Variant,
Transition,
UseInViewOptions,
} from 'framer-motion';
interface InViewProps {
children: ReactNode;
variants?: {
hidden: Variant;
visible: Variant;
};
transition?: Transition;
viewOptions?: UseInViewOptions;
}
const defaultVariants = {
hidden: { opacity: 0 },
visible: { opacity: 1 },
};
export function InView({
children,
variants = defaultVariants,
transition,
viewOptions,
}: InViewProps) {
const ref = useRef(null);
const isInView = useInView(ref, viewOptions);
return (
<motion.div
ref={ref}
initial='hidden'
animate={isInView ? 'visible' : 'hidden'}
variants={variants}
transition={transition}
>
{children}
</motion.div>
);
}
Component API
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | The content inside the InView component. | |
| variants | { hidden: Variant; visible: Variant; } | { hidden: { opacity: 0 }, visible: { opacity: 1 } } | Variants to define the animation states. |
| transition | Transition | Specifies the animation transitions. | |
| viewOptions | UseInViewOptions | Options to configure the in-view behavior. |