Lagane i snažne React komponente za animaciju ulaska elemenata (reveal animations) pokretane **Framer Motion** bibliotekom.
npm install @brunoerceg/animate-inbash
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
$3
Grupira elemente i animira ih jednog za drugim (stagger efekt).
`tsx
import { AnimateIn } from "@brunoerceg/animate-in";
export default function MyComponent() {
return (
Prvi element
Drugi element
);
}
`
$3
Automatski dijeli rečenicu na riječi i animira svaku riječ zasebno.
`tsx
Ovaj tekst će se pojaviti riječ po riječ.
`
$3
Ako želiš animirati element bez kontejnera.
`tsx
Dolazim s lijeve strane nakon pola sekunde.
`
---
⚙️ Props (Postavke)
$3
$3
| 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. |
$3
| 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.
`
``