Czym jest Lottie Animation i jak dodać ją do WordPressa

Lottie Animation to otwarty format plików animacyjnych, który łączy możliwości wektorowych grafik oraz animacji. Został stworzony przez firmę Airbnb w celu umożliwienia programistom łatwego dodawania interaktywnych animacji wektorowych do aplikacji mobilnych i stron internetowych. Mają one bardzo szeroki wachlarz możliwości i cały czas są rozwijane.

Lottie została nazwana na cześć niemieckiego reżysera filmowego i czołowego pioniera animacji sylwetki. Jej najbardziej znane filmy to Przygody księcia Achmeda (1926) – najstarszy zachowany pełnometrażowy film animowany, poprzedzający o ponad dziesięć lat pełnometrażową Królewnę Śnieżkę i siedmiu krasnoludków Walta Disneya.

Skąd pobrać bezpłatną animację Lottie?

Prostą animację stworzymy w bezpłatnym serwisie Lottie Files. To najpopularniejsza platforma do udostępniania i ściągania animacji Lottie. Oferuje ona bezpłatne narzędzia oraz przewodniki, dzięki którym możemy spróbować swoich sił w animowaniu. Wystarczy założyć darmowe konto.

Jeżeli nie chcemy uczyć się tworzenia własnych animacji od podstaw lub nie mamy na to czasu, po zalogowaniu dostaniemy dostęp do setek darmowych materiałów oraz wysokojakościowych animacji premium. Możemy także skorzystać ze strony twórców formatu – firmy Airbnb – to najlepszy punkty wyjścia, aby zacząć stawiać pierwsze kroki w Lottie.

Co warto wiedzieć o plikach Lottie i jak je dodawać

Format plików Lottie jest oparty na formacie plików JSON (JavaScript Object Notation), który zawiera szczegółowe informacje o animacji. Użytkownicy mogą tworzyć animacje za pomocą narzędzi do grafiki wektorowej, takich jak Illustrator lub After Effects, a następnie eksportować je do formatu Lottie.

Jeśli zarządzamy stroną na WordPressie, bez problemu dodamy animację do WordPressa, korzystając z bloku Gutenberga Lottie:

Jednym z głównych zalet Lottie Animation jest to, że pliki animacji są bardzo lekkie i nie obciążają strony, a w razie potrzeby mogą być także zapisane do standardowego pliku .gif, chociaż to znacząco wpływa na ich jakość.

Dzięki oparciu o format JSON zachowują one po prostu pełną płynność i wyglądają bardzo dobrze. Oto przykłady: