Przewijanie stron internetowych może być naprawdę interesujące! W tym artykule przyjrzymy się, jak sprawić, aby kształty SVG i clip-pathy animowały się podczas przewijania, dodając nieco dynamizmu i falistości do projektu. Możemy przekształcić jeden kształt w inny w momencie, gdy kształt wchodzi do widoku.
Animacja Ścieżek na Separatorach
Animacja ścieżki podczas przewijania może być szczególnie interesująca dla separatorów i obramowań do pełnoekranowych obrazów. W pierwszym przykładzie animujemy ścieżkę SVG, która ma ten sam kolor wypełnienia co tło strony. Podczas przewijania będziemy animować ścieżkę SVG z prostokąta do kształtu fali.
Aby to zadziałało, potrzebujemy dwóch ścieżek: jednej początkowej, która jest prostokątem, oraz końcowej, która jest kształtem fali. Tworząc ścieżki, musimy pamiętać, że wszystkie punkty obecne w końcowej ścieżce muszą być obecne również w początkowej. Najlepszym sposobem na zapewnienie poprawnej animacji ścieżki jest rozpoczęcie od najbardziej skomplikowanego kształtu, którym w naszym przypadku jest końcowa ścieżka z krzywą.
Tworzenie Ścieżek SVG
Niestety, oprogramowanie do projektowania graficznego może nie być najlepszym wyborem do tworzenia odpowiednich, zoptymalizowanych ścieżek. Zazwyczaj zaczynam od tworzenia kształtów w programie Sketch, a następnie optymalizuję je za pomocą SVGOMG. Potem kopiuję ścieżkę i wklejam ją do SvgPathEditor. Krok optymalizacji nie zawsze jest konieczny, ponieważ edytor ścieżek oferuje zaokrąglanie, co jest świetne. SVGOMG może usunąć przekształcenia zastosowane przez Sketch.
Gdy mamy zoptymalizowany SVG z „czystą” ścieżką, możemy użyć edytora do stworzenia początkowego kształtu na podstawie bardziej skomplikowanego.
Znaczniki i Stylizacja
Korzystając z atrybutu danych, definiujemy końcową ścieżkę, którą chcemy, aby początkowa animowała. Trochę CSS zapewni, że nasz SVG będzie umieszczony na pełnej szerokości, na górze dużego obrazu tła.
JavaScript
Do płynnego przewijania użyjemy nowej biblioteki Lenis od Studio Freight. Wtyczka ScrollTrigger od GSAP pozwoli nam animować element, gdy wejdzie lub wyjdzie z widoku.
Importujemy potrzebne skrypty, preloadujemy obrazy i pobieramy wszystkie elementy ścieżek, które chcemy animować (mają klasę „path-anim”).
Następnie inicjalizujemy płynne przewijanie i animujemy nasze ścieżki, gdy wchodzą do widoku. Końcowa ścieżka jest zdefiniowana w atrybucie danych „data-path-to” w elemencie ścieżki.
Na koniec definiujemy początek i koniec animacji przez górną część elementu SVG osiągającą dolną część widoku oraz dolną część elementu osiągającą górną część widoku.
Wsparcie Przeglądarek i Dostępność
Przejścia widoków są nadal funkcją eksperymentalną i nie są szeroko wspierane. Astro zapewnia fallback dla przeglądarek, które nie obsługują tej funkcji, a także respektuje ustawienie prefers-reduced-motion.
Wybory Projektowe dla Przejść Widoków
Na urządzeniach mobilnych przejścia często wydają się subtelniejsze ze względu na ograniczoną wielkość ekranu. Na większych ekranach animacje mogą wydawać się zbyt intensywne, co może wpływać na doświadczenie użytkownika. Dobrym podejściem projektowym jest uproszczenie i powiększenie elementów.
Ostateczne Uwagi
Łączenie płynnego przewijania z animacjami ścieżek SVG może dodać dodatkowy poziom dynamizmu do projektu. To technika, która nie jest zbyt skomplikowana, ale efekt końcowy może wyglądać bardzo imponująco. Ta technika nadaje organiczny charakter doświadczeniu przewijania i może zastąpić potrzebę użycia WebGL do pewnych prostych efektów zniekształcenia.
Mam nadzieję, że podobał Ci się ten krótki przewodnik i że znajdziesz go przydatnym do tworzenia własnych animacji!
Link do pełnego tutorialu: How to Animate SVG Shapes on Scroll
