Lottie, Rive i Animacje Webowe

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.

Wyślij zapytanie