Animations / Motion

Lottie, Rive i Animacje Webowe

Lottie (After Effects JSON), Rive (state machines), dotLottie, GSAP ScrollTrigger i CSS scroll-driven animations w React.

Lottie JSON

After Effects

Rive states

Interactive

GSAP ST

Scroll magic

CSS native

Zero JS

6 narzędzi animacji webowych — porównanie

Lottie, Rive, Framer Motion, GSAP, CSS Animations i WAAPI — typ, interaktywność, rozmiar i zastosowanie.

Narzędzie	Typ	Interaktywność	Runtime	Kiedy
Lottie (lottie-react)	Wektorowe z AE	Playback tylko	~50KB runtime	Loading, success, ilustracje z AE
Rive (@rive-app)	Interactive + state machine	State machines, triggers	~30KB runtime	Interactive icons, game animacje, reagujące na data
Framer Motion	React UI animations	Gesture, layout, exit	~50KB	UI transitions, page animations, React-first
GSAP + ScrollTrigger	JS Animation Engine	Scroll, timeline, pins	~30KB + plugins	Marketing sites, scroll storytelling, complex sequences
CSS Animations	Native browser	Hover, focus, class	0KB	Simple UI, hover effects, no JS overhead
WAAPI (Web Animations API)	Native browser JS	Programatyczne	0KB	Performance-critical, native API bez biblioteki

Często zadawane pytania

Co to jest Lottie i jak używać animacji After Effects w React?

Lottie (Airbnb, 2017): render animacji After Effects w przeglądarce. Format: JSON (.json) eksportowany przez bodymovin plugin. Skalowalne (wektorowe). Cross-platform: web, iOS, Android. Małe rozmiary plików (zwykle 10-100KB). LottieFiles: platforma z biblioteką gotowych animacji. Darmowe i płatne. Eksport do JSON, dotLottie (.lottie). Instalacja React: npm install lottie-react. import Lottie from 'lottie-react'. import animationData from './animation.json'. Lottie animationData={animationData} loop={true} autoplay={true}. Kontrola: const lottieRef = useRef(). lottieRef.current.play(). lottieRef.current.pause(). lottieRef.current.stop(). lottieRef.current.setSpeed(0.5). lottieRef.current.goToAndPlay(50). lottieRef.current.playSegments([start, end], true). dotLottie: nowy format (.lottie). ZIP archiwum z JSON + assety. Mniejszy od JSON. @lottiefiles/dotlottie-react: import {DotLottieReact} from '@lottiefiles/dotlottie-react'. DotLottieReact src='/animation.lottie' loop autoplay. Playback API przez ref. @lottie-interactive: interaktywne Lottie. Hover, click, morph triggers. Stany animacji. Wydajność Lottie: JSON parse przy ładowaniu. SVG rendering lub Canvas mode. Wiele Lottie = performance issue. Lazy load animacje poza viewport. IntersectionObserver do start/stop.

Rive — interaktywne animacje z state machines?

Rive (dawniej Flare, 2021): narzędzie do tworzenia interaktywnych animacji. Stan machiny (state machines) — animacje reagujące na input. Drastycznie mniejsze pliki niż Lottie dla złożonych animacji. Runtime dla Web, iOS, Android, Flutter, C++. rive.app — edytor online. Instalacja: npm install @rive-app/react-canvas. import {useRive} from '@rive-app/react-canvas'. Podstawowe użycie: const {RiveComponent} = useRive({src: '/animation.riv', stateMachines: 'State Machine 1', autoplay: true}). return RiveComponent. Interakcja ze state machine: const {rive, RiveComponent} = useRive({...}). Inputs: const isHover = useStateMachineInput(rive, 'State Machine 1', 'isHover'). Boolean: isHover.value = true. Number: speedInput.value = 5. Trigger: triggerInput.fire(). Podejście event-driven: rive.on(EventType.StateChange, (e) => console.log(e)). Rive vs Lottie: Rive — interaktywność, state machines, dynamiczne. Lottie — After Effects export, design tool integration. Rive — kompresja lepsza dla złożonych animacji. Lottie — prostsze użycie dla read-only animacji. Rive jest lepszy dla: loading states z przejściami. Interaktywne ikony. Animowane ilustracje reagujące na dane. Gamifikacja. Rive community — gotowe animacje. Format .riv — binarny, wydajny. Rive Layout: kontrola rozmiaru i wyrównania. fit: rive.Layout.Fit.Cover. alignment: rive.Layout.Alignment.Center.

Lottie vs Rive vs CSS animacje vs Framer Motion — kiedy co?

CSS Animations + CSS Transitions: najprostsze. Zero JS overhead. Brak zewnętrznych zależności. Ograniczone do CSS properties. Dobre dla: hover effects, button states, simple UI transitions. Framer Motion: React-first. Layout animations. Gesture-based. AnimatePresence. Keyframes. Orchestration (staggered, delay). Dobre dla: UI komponent animacje, page transitions, drag. Problemy z SSR (partial). Bundle: ~50KB. GSAP (GreenSock): profesjonalna, potężna. Dowolne właściwości CSS + JS. ScrollTrigger plugin — scroll-based animacje. MorphSVG — transformacje SVG. Dobre dla: marketing sites, scroll storytelling, complex sequencing. Bezpieczny dla SSR. Lottie: After Effects jakość. Animatorzy mogą pracować w AE. Gotowe animacje na LottieFiles. Tylko playback (no interactivity without workarounds). Dobre dla: splash screens, loading indicators, success animations, icons. Rive: interaktywna grafika. State machines. Dynamiczne animacje oparte na danych. Małe pliki. Dobre dla: interactive icons, game animations, animated illustrations. Wybór: Loading spinner -> Lottie lub CSS. Success/error animation -> Lottie. Hover ikony -> Rive lub CSS. Page transition -> Framer Motion. Scroll storytelling -> GSAP ScrollTrigger. Complex React UI -> Framer Motion. Marketing hero -> GSAP. Animated illustration reagująca na state -> Rive. Performance: CSS (best) > WAAPI > Framer Motion > GSAP > Lottie (heavy) > Rive (mid).

Spine i After Effects — zaawansowane animacje webowe?

Spine (Esoteric Software): skeletal animation tool. Sprite-based (nie wektorowe). Gry i aplikacje interaktywne. Runtime dla Web (spine-ts). spine-phaser — integracja z Phaser.js. spine-canvas, spine-webgl. Droższy niż Rive ale potężniejszy dla gier. Używany: Apple, Bandai Namco. Po co After Effects dla web: motion design workflow. Compositing i efekty niemożliwe w Rive. bodymovin/LottieFiles plugin dla export. Limitacje AE -> Lottie: 3D layers (ograniczone). Niektóre efekty (brak). Expressions (ograniczone). Tekst (partial). Testy kompatybilności: LottieFiles preview tool. SVGator: animacje SVG online. Export jako CSS animacje lub SMIL. Bez zewnętrznej runtime. Integracja React: import SVG jako komponent. Animate przez CSS classes. Haiku Animator (wycofany): był generatorem React + Lottie. PIXI.js + animacje: WebGL renderer. PixiJS Animate (od Flash). spine-pixi integracja. Gsap + PixiJS dla 2D games. Three.js + animacje: 3D w przeglądarce. GLTF z animacjami. Three.js AnimationMixer. react-three-fiber (R3F) — React wrapper dla Three.js. drei — helpers. useAnimations hook. Babylon.js — alternatywa Three.js. Motion Canvas (open source): programatyczne animacje (jak Manim). TypeScript API. Dla twórców video/edu. Remotion: React -> video. Animacje w kodzie. Renderuj do MP4. Programatyczne video generation.

Optymalizacja animacji — performance i dostępność?

CSS Performance rules: animuj tylko transform i opacity — GPU-accelerated. Unikaj animowania width, height, top, left (reflow). will-change: transform — hint dla GPU layer. Uważaj: nadużywanie will-change = więcej pamięci GPU. JavaScript Animation Performance: requestAnimationFrame. GSAP używa rAF automatycznie. Framer Motion automatycznie. Brak setTimeout/setInterval dla animacji. 60 FPS target: 16ms per frame. Chrome DevTools: Performance tab. Zielone: GPU layer (composited). Czerwone: reflow (problem). Prefers-reduced-motion: @media (prefers-reduced-motion: reduce) { * {animation-duration: 0.01ms} }. JavaScript: window.matchMedia('(prefers-reduced-motion: reduce)').matches. Framer Motion: useReducedMotion(). Wyłącz lub uproszczone animacje dla dostępności. Lazy loading animacji: IntersectionObserver. Start animacji gdy element widoczny. Lottie — autoplay: false, start przy visibility. React: useEffect + observer pattern. Framer Motion + AnimatePresence: unmount animacje. animate={controls} — manualna kontrola. Scroll animacje: Framer Motion useScroll + useTransform. GSAP ScrollTrigger. CSS scroll-driven animations (natywne Chrome 115+): animation-timeline: scroll(). Bez JavaScript. Fallback dla starszych przeglądarek. Animacje SVG: stroke-dasharray + stroke-dashoffset — path draw effect. CSS animation lub GSAP. Morphing SVG: GSAP MorphSVGPlugin. Flubber library. d3-interpolate-path. Animacje w React Native: Animated API (stary). React Native Reanimated v3 (polecany). Gesture Handler integration. useSharedValue, useAnimatedStyle. Worklet — runs on UI thread.

Czytaj dalej