Introducing Motion-Primitives Pro - Advanced components and templates to help you build a website that stands out.

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

Scroll down

Craft beautiful animated components with Motion-Primitives. Designed for developers and designers. The library leverages the power of Motion, with intuitive APIs that simplifies creating complex animations for any project. Start building more dynamic interfaces today.

Basic in view with margin option

Scroll down

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 ::

Scroll down
Image placeholder from cosmos.so, index:0
Image placeholder from cosmos.so, index:1
Image placeholder from cosmos.so, index:2
Image placeholder from cosmos.so, index:3
Image placeholder from cosmos.so, index:4
Image placeholder from cosmos.so, index:5
Image placeholder from cosmos.so, index:6
Image placeholder from cosmos.so, index:7
Image placeholder from cosmos.so, index:8
Image placeholder from cosmos.so, index:9

Code

'use client';
import { ReactNode, useRef } from 'react';
import {
  motion,
  useInView,
  Variant,
  Transition,
  UseInViewOptions,
} from 'motion/react';

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

PropTypeDefaultDescription
childrenReactNodeThe content inside the InView component.
variants{ hidden: Variant; visible: Variant; }{ hidden: { opacity: 0 }, visible: { opacity: 1 } }Variants to define the animation states.
transitionTransitionSpecifies the animation transitions.
viewOptionsUseInViewOptionsOptions to configure the in-view behavior.