Installation
Pick a client and clone the repository into its skills directory.
Installation
About this skill
GSAP animations for JARVIS HUD transitions and effects
How to use
Zainstaluj skill GSAP w swoim projekcie JARVIS, dodając go do konfiguracji umiejętności asystenta. Sprawdź, że masz dostęp do biblioteki GreenSock Animation Platform i że Twój projekt obsługuje TypeScript.
Przed napisaniem animacji napisz test — to kluczowa praktyka TDD opisana w dokumentacji. Test powinien sprawdzać, czy animacja wchodzi z poprawnymi właściwościami, czy respektuje preferencje zmniejszonej animacji i czy prawidłowo się czyści.
W komponencie Vue, gdzie chcesz animować panel HUD, zaimportuj GSAP i zdefiniuj animację używając transformacji lub opacity — nigdy nie animuj właściwości, które powodują zmianę layoutu. Użyj GPU-accelerowanych właściwości dla płynności.
Dla złożonych sekwencji animacji utwórz timeline GSAP zamiast pojedynczych animacji. Timeline pozwala Ci kontrolować kolejność i timing wielu efektów jednocześnie.
W hooku unmount komponentu zawsze zabij wszystkie animacje za pomocą gsap.globalTimeline.clear() lub kill() na konkretnej animacji. To zapobiega wyciekom pamięci i konfliktom z przyszłymi animacjami.
Wybierz odpowiednią funkcję easing dla nastroju interfejsu JARVIS — dokumentacja zawiera wzorce zaawansowane w folderze references/, które pokazują, jak organizować złożone animacje.