@brunoerceg/animate-in

Light and powerful React components for element entry animations (reveal animations) powered by the Framer Motion library.

🚀 Installation

npm install @brunoerceg/animate-in framer-motion clsx tailwind-merge

🛠️ Settings (Tailwind CSS)

This package uses Tailwind classes. Make sure you have Tailwind CSS installed in your project.

📖 Use

1. Basic container (Container)

It groups elements and animates them one after the other (stagger effect).

import { AnimateIn } from "@brunoerceg/animate-in";

export default function MyComponent() {
  return (
    <AnimateIn.Container stagger="medium">
      <AnimateIn.Item>
        <p>Prvi element</p>
      </AnimateIn.Item>

      <AnimateIn.Item>
        <p>Drugi element</p>
      </AnimateIn.Item>
    </AnimateIn.Container>
  );
}

2. Text animation (Words)

Automatically divides a sentence into words and animates each word separately. Note: The <AnimateIn.Words> element must be placed inside an <AnimateIn.Container> or <AnimateIn.TextContainer>.

<AnimateIn.TextContainer>
  <AnimateIn.Words from="bottom" stagger="fast">
    Ovaj tekst će se pojaviti riječ po riječ.
  </AnimateIn.Words>
</AnimateIn.TextContainer>

3. Individual elements

If you want to animate an element without a container.

<AnimateIn.Individual from="left" delay={0.5}>
  Dolazim s lijeve strane nakon pola sekunde.
</AnimateIn.Individual>

---

⚙️ Props (Postavke)

AnimateIn.Container / AnimateIn.TextContainer

Prop	Type	Default	Description
stagger	slow, medium, fast, number	medium	Delay between items
delay	number	0	Start delay
amount	some, half, full, any, number	quarter	Trigger threshold

AnimateIn.Item / AnimateIn.Individual

Prop	Type	Default	Description
from	top, bottom, left, right, none	bottom	Direction from which the element enters
duration	number	0.7	Animation duration (seconds)
delay	number	0	Additional delay for specific element

AnimateIn.Words

Prop	Type	Default	Description
from	top, bottom, left, right, none	bottom	Direction from which the element enters
duration	number	0.7	Animation duration (seconds)
stagger	slow, medium, fast, number	fast	Delay between items

---

📝 Note for Next.js (App Router)

Since the package uses framer-motion, the components are client-side. The package already contains the "use client" directive, so you can directly import it into your pages.