react-entry-motion

Ultra-light React entry animation library powered by Framer Motion.

Features

• Motion only - No hardcoded colors, images, or design opinions
• Minimal bundle size - Tree-shakable and optimized
• Multiple animations - Combine animations for unique effects
• TypeScript - Full type safety with strict mode -Production ready - Clean architecture and well-tested patterns

Installation

npm install react-entry-motion framer-motion

or

yarn add react-entry-motion framer-motion

or

pnpm add react-entry-motion framer-motion

Note: framer-motion is a peer dependency and must be installed separately.

Usage

Basic Example

import { Entry } from "react-entry-motion";

function App() {
  return (
    <Entry animation="fade" duration={0.5}>
      <div>This will fade in</div>
    </Entry>
  );
}

Available Animations

• fade - Fades in from transparent to opaque
• slideUp - Slides up from below while fading in
• slideDown - Slides down from above while fading in
• scale - Scales from smaller to normal size
• zoom - Zooms in from larger scale
• rotate - Rotates while fading in
• blur - Blurs in from blurred to sharp
• bounce - Bounces up with spring physics

Multiple Animations

You can combine multiple animations for unique effects:

import { Entry } from "react-entry-motion";

function App() {
  return (
    <Entry animation={["fade", "slideUp", "scale"]} duration={0.8}>
      <div>Combined animation effect</div>
    </Entry>
  );
}

Advanced Example

import { Entry } from "react-entry-motion";

function Card() {
  return (
    <Entry
      animation="slideUp"
      duration={0.6}
      delay={0.2}
      easing="easeOut"
      distance={50}
      className="card"
    >
      <h2>Animated Card</h2>
      <p>This card slides up with custom settings</p>
    </Entry>
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | animation | AnimationType \| AnimationType[] | Required | Animation type(s) to apply. Can be a single animation or an array for combining multiple animations. | | duration | number | 0.8 | Animation duration in seconds | | delay | number | 0 | Delay before animation starts in seconds | | easing | "linear" \| "ease" \| "easeIn" \| "easeOut" \| "easeInOut" | "easeOut" | Easing function for the animation | | distance | number | 40 | Distance for slide animations in pixels | | children | ReactNode | Required | React children to animate |

All other props are forwarded to the underlying motion.div component.

Examples

Staggered List Items

import { Entry } from "react-entry-motion";

function List() {
  const items = ["Item 1", "Item 2", "Item 3"];

  return (
    <ul>
      {items.map((item, index) => (
        <Entry
          key={item}
          animation="slideUp"
          delay={index * 0.1}
          duration={0.5}
        >
          <li>{item}</li>
        </Entry>
      ))}
    </ul>
  );
}

Different Animations for Different Elements

import { Entry } from "react-entry-motion";

function Dashboard() {
  return (
    <div>
      <Entry animation="fade" duration={0.3}>
        <header>Header</header>
      </Entry>
      
      <Entry animation="slideUp" delay={0.2} duration={0.6}>
        <main>Main Content</main>
      </Entry>
      
      <Entry animation={["fade", "scale"]} delay={0.4} duration={0.8}>
        <footer>Footer</footer>
      </Entry>
    </div>
  );
}

TypeScript

Full TypeScript support with exported types:

import { Entry, EntryProps, AnimationType } from "react-entry-motion";

const animation: AnimationType = "fade";

const props: EntryProps = {
  animation: "slideUp",
  duration: 0.5,
  children: <div>Content</div>,
};

License

MIT