Programista dostaje animowaną ikonę jako GIF. Na ostrym ekranie telefonu jest rozmyta, plik jest ciężki, a na ciemnym tle krawędzie się strzępią, bo GIF nie zna półprzezroczystości. Zmiana koloru oznacza nowy eksport.
Lottie działa inaczej. Plik nie zawiera gotowych klatek obrazu, tylko opis kształtów i kolorów oraz klatki kluczowe z krzywymi ruchu. Odtwarzacz rysuje animację na bieżąco, więc jest ostra w każdym rozmiarze. Biblioteki do odtwarzania udostępnił Airbnb, a plik eksportuje się z After Effects specjalną wtyczką. Na stronie animację można zapętlić, uruchomić po przewinięciu do sekcji, zatrzymać na wybranej klatce albo odtworzyć po dotknięciu przycisku.
Najlepiej sprawdza się przy płaskiej grafice: ikonach, ilustracjach, mikrointerakcjach, ekranach powitalnych w aplikacjach i animacji logo na stronie. Rendery 3D, zdjęcia i dłuższe filmy zostają przy wideo.
Ograniczenia
Lottie obsługuje tylko część tego, co potrafi After Effects. Kształty, maski, kolory i ruch przechodzą dobrze. Wiele efektów, w tym rozmycia, poświaty, cząsteczki i efekty z zewnętrznych wtyczek, nie przechodzi albo działa tylko w części odtwarzaczy. Zdjęcia da się osadzić, ale plik szybko puchnie. Bardzo złożona animacja z wieloma maskami potrafi też obciążyć słabszy telefon bardziej niż zwykły film.
O formacie decyduje się więc przed animowaniem. Animator od początku używa tylko tego, co da się wyeksportować, i sprawdza plik w odtwarzaczu, w którym animacja będzie grała. Podgląd w After Effects pokaże też efekty, których odtwarzacz nie zna. Ruch zrobiony bez tej wiedzy często trzeba potem przerabiać.