@brunoerceg/animate-in

Lagane i snažne React komponente za animaciju ulaska elemenata (reveal animations) pokretane Framer Motion bibliotekom.

🚀 Instalacija

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

🛠️ Postavke (Tailwind CSS)

Ovaj paket koristi Tailwind klase. Provjeri imaš li instaliran Tailwind CSS u svom projektu.

📖 Korištenje

1. Osnovni kontejner (Container)

Grupira elemente i animira ih jednog za drugim (stagger efekt).

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

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

2. Animacija teksta (Words)

Automatski dijeli rečenicu na riječi i animira svaku riječ zasebno.

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

3. Individualni elementi

Ako želiš animirati element bez kontejnera.

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

⚙️ Props (Postavke)

AnimateIn.Container / AnimateIn.TextContainer

AnimateIn.Container / AnimateIn.TextContainer

| Prop | Tip | Default | Opis | | :-------- | :--------------------------------------- | :---------- | :-------------------------------------------------- | | stagger | 'slow' \| 'medium' \| 'fast' \| number | 'medium' | Razmak između animacija djece. | | delay | number | 0 | Početno kašnjenje prije prve animacije. | | amount | 'some' \| 'half' \| 'full' \| number | 'quarter' | Postotak vidljivosti elementa potreban za okidanje. |

AnimateIn.Item / AnimateIn.Individual

| Prop | Tip | Default | Opis | | :--------- | :------------------------------------------------- | :--------- | :------------------------------------------- | | from | 'top' \| 'bottom' \| 'left' \| 'right' \| 'none' | 'bottom' | Smjer iz kojeg element dolazi. | | duration | number | 0.7 | Koliko dugo traje sama animacija (sekunde). | | delay | number | 0 | Dodatno kašnjenje za taj specifični element. |

📝 Napomena za Next.js (App Router)

Budući da paket koristi framer-motion, komponente su klijentske. Paket već sadrži "use client" direktivu, tako da ga možete direktno uvesti u svoje stranice.