auto-animate

Zero-config animations for React, Vue, Solid, Svelte, Preact with @formkit/auto-animate (3.28kb). Prevents 15 documented errors including React 19 StrictMode bugs, SSR imports, conditional parents, viewport issues, drag u0026 drop conflicts, and CSS transform bugs.\n\nUse when: animating lists/accordions/toasts, troubleshooting SSR animation errors, React 19 StrictMode issues, or need accessible drop-in transitions with auto prefers-reduced-motion.

1. Zainstaluj paczkę @formkit/auto-animate w swoim projekcie, używając npm install @formkit/auto-animate lub yarn add @formkit/auto-animate.

2. W komponentach React utwórz hook useAutoAnimateSafe, który dynamicznie importuje bibliotekę w useEffect. To zapobiega błędom SSR w Next.js i Cloudflare Workers – AutoAnimate wymaga DOM API niedostępnych na serwerze.

3. Zadeklaruj state dla referencji do elementu nadrzędnego za pomocą useState, a następnie przypisz tę referencję do kontenera, w którym będą się pojawiać animowane elementy (lista, akordeon, toast).

4. W useEffect sprawdź, czy kod wykonuje się w przeglądarce (typeof window !== 'undefined'), a następnie dynamicznie zaimportuj auto-animate i wywołaj autoAnimate(parent) na elemencie.

5. Dodawaj lub usuwaj elementy potomne normalnie – biblioteka automatycznie wykryje zmiany i zastosuje płynne przejścia. Nie musisz definiować żadnych klas CSS ani keyframes.

6. Jeśli używasz warunkowego renderowania rodzica lub masz problemy z drag-and-drop, upewnij się, że referencja do elementu jest zawsze poprawna i że importujesz bibliotekę po stronie klienta, a nie na serwerze.