motion

Motion Vue to biblioteka animacji dla Vue 3 i Nuxt, która pozwala tworzyć płynne, sprzętowo przyspieszane efekty wizualne. Obsługuje proste animacje (fade, slide, scale), interakcje oparte na gestach (hover, tap, drag), animacje powiązane ze scrollem, przejścia między elementami i animacje oparte na fizyce sprężyn. Idealna do deklaratywnego definiowania animacji bez konieczności pisania złożonych timelinów. Minimalna wielkość pakietu, gotowa do produkcji.

1. Zainstaluj Motion Vue za pomocą menedżera pakietów: dla Vue 3 uruchom pnpm add motion-v, dla Nuxt 3 uruchom pnpm add motion-v @vueuse/nuxt.
2. Jeśli używasz Nuxt 3, skonfiguruj moduł w pliku nuxt.config.ts, dodając motion-v/nuxt do tablicy modules w konfiguracji.
3. Określ, co chcesz animować: jeśli pracujesz z komponentem Motion i gestami, załaduj referencję dla komponentów; jeśli używasz composables takie jak useMotionValue lub useScroll, załaduj referencję dla composables; jeśli szukasz gotowych wzorców, załaduj przykłady animacji.
4. Zdefiniuj animacje deklaratywnie w szablonie Vue — użyj komponentu Motion do prostych animacji fade, slide czy scale, lub composables do bardziej zaawansowanych efektów.
5. Dodaj interakcje oparte na gestach (hover, tap, drag) bezpośrednio w szablonie, korzystając z wbudowanego API Motion Vue.
6. Testuj animacje w przeglądarce — biblioteka jest zoptymalizowana pod kątem wydajności dzięki przyspieszeniu sprzętowemu.