Projektuj Animacje UI z Lottie Files i After Effects: Opcje transformacji kształtów wektorowych
w Praktyce
6 godz. 18 min · After Effects · Grafika motion i 3D
Michał WedlechowiczCzego się nauczysz
- Wprowadzenie do Lottie
- Przykłady animacji na stronach
- Wprowadzenie do After Effects
- Import plików do aftera
- Praca z timelinem
- Pierwsze projekty i kompozycje
- Instalacja pluginu Lottie
- Przygotowanie plików w Adobe Illustrator
- Konwertowanie warstw na ścieżki
- Podstawowe właściwości warstw w After Effects
- Transformacje ścieżek na osi czasu
- Dopuszczalne efekty dla Lottie
- Usuwanie błędów i niepotrzebnych warstw
- Graph Editor
- Optymalizacja wagi pliku
- Eksport do formatu dotLottie
- Import do Webflow
- Dodawanie interakcji i animacji
Konfiguracja i poznanie After Effects
Wystartujemy z wprowadzeniem do After Effects. Poznamy podstawowe funkcje programu, przygotujemy i zaciągniemy do niego pierwsze materiały i zaczniemy wprawiać je w ruch pracując na ścieżkach wektorowych. Zainstalujemy plugin Lottie i skonfigurujemy swoje konto w serwisie Lottie FIles, abyśmy mogli eksportować tam nasze animacje i pobierać je w formatach dotLottie albo JSON.
Praktyczny projekt z After Effects
W drugim rozdziale zaczniemy pracować nad docelowym projektem. Poznasz te funkcje Aftera, które będą istotne dla przygotowania plików Lottie. Poznasz też ograniczenia i najczęstsze problemy, oraz dowiesz się jak sobie z nimi radzić i jak optymalizować pliki importowane do After Effects. Dowiesz się też jakich narzędzi wolno używać, a które nie są wspierane przez format Lottie. Jeżeli natomiast pracujesz już z motion designem i znasz bardzo dobrze After Effects, to dzięki temu szkoleniu będziesz wiedział jak wykorzystać swoje umiejętności na zupełnie nowym polu, jakim jest animacja na potrzeby interfejsów.
Dopracowanie projektów i praca z Lottie w Webflow
Ostatni rozdział kursu to dopracowanie projektu w najmniejszych szczegółach i praca ze ścieżkami wektorowymi oraz z ich animacją. Usuniemy niepotrzebne elementy w kompozycjach i zadbamy o optymalizację pliku oraz o jego wagę. Postaramy się, żeby jego waga oscylowała w granicach od kilkudziesięciu do maksymalnie kilkuset kilobajtów, aby nie obciążać strony internetowej. Dodatkowo zaimportujemy nasz Lottie do Webflow, abyśmy mogli zobaczyć jak w praktyce będzie działała nasza animacja i w jakie interakcje możemy z nią wchodzić.
Zaawansowana animacja z Lottie
Jednym z praktycznych projektów jaki stworzymy w trakcie kursu będzie Bardzo zaawansowana animacja postaci oparta na ruchu węzłów wektorowych. Do stworzenia projektu wystarczą nam podstawowe funkcje Aftera. W kursie dowiesz się, że projektując animację pod Lottie nie możemy korzystać z bardziej złożonych narzędzi After Effects, ponieważ mogą nie być one wspierane przez format Lottie czy JSON. Przejdziemy przez listę funkcjonalności, które możemy stosować, a których lepiej unikać, aby mieć pewność, że nasze animacje będą wyświetlać się prawidłowo na wielu różnych platformach.
Dla kogo jest ten kurs?
Materiał szkoleniowy, to zbiór lekcji wideo, poukładanych w odpowiednich rozdziałach i podzielonych na części tematyczne. Został opracowany z myślą o: projektantach graficznych, UI designerach, motion designerach. Wszystkie lekcje przygotowane są tak, aby osoby początkujące mogły nauczyć się podstaw animacji obsługi After Effects. Natomiast osoby posiadające już doświadczenie z animacją dowiedzą się jak wykorzystać swoją wiedzę dla tworzenia animacji i interakcji w dziedzinach związanych z Digital Designem. Kto jeszcze może skorzystać na wiedzy zawartej w tym kursie? Graficy pracujący w zawodzie od lat - doświadczeni graficy będą mogli wykorzystać swoją wiedzę na zupełnie innym polu, jakim jest motion. Dowiedzą się jak działa After Effects, oraz jak eksportować poprawne pliki Lottie, niezawierające błędów. Zyskają nowe perspektywy i umiejętności, które pozwolą im wyróżnić się na konkurencyjnym rynku pracy. Freelancerzy pracujący zdalnie dla dużych agencji reklamowych - dla nich materiał to droga do poznania nowych technik pracy i wykorzystania swojej wiedzy na zupełnie innych polach, co przełożyć się może na otrzymywanie bardziej zróżnicowanych zleceń i lepsze zarobki.
OK.
Skoro mamy już pierwszy komponent naszej animacji i pierwszą
kompozycję zrobioną, to zajmijmy się teraz drugą.
Tutaj mamy taki moduł, w którym użytkownik wybiera
wybiera sobie asystenta AI i też powinniśmy tutaj rozwinąć tą listę,
pokazać tych użytkowników.
Jakoś oni się powinni tutaj wyświetlać z jakimś może over rzutem
i też kursor tutaj powinien przebiegać sobie po tych po tych gościach
i wybrać jednego z nich.
Dlatego też tutaj wcześniej sobie to podzieliłem na warstwy.
Na przykład takie ikonki check są na osobnych warstwach.
Na osobnych warstwach są też awatary.
I tutaj te awatary będą bić mapami.
Nie możemy ich zamienić na wektory.
Tutaj nic nie zrobimy, z tym, że to będą bitmapy.
One nie są duże, więc też nie powinny jakoś drastycznie wpływać na.
Wagę naszego pliku ulotki.
Te teksty też mam na osobnych warstwach.
Przycisk itd background oczywiście.
Więc teraz przejdę sobie do after, a tutaj ta nasza kompozycja.
Ja jestem jak najbardziej zadowolony z tego efektu.
Mi się to podoba i tutaj wybieram File, następnie Import
File ponownie i wybieram Assistance.
Następnie upewniam się, że ładuję to jako kompozycję z zachowaniem
rozmiarów warstw i wybieram przycisk Open.
Klikam dwukrotnie i jesteśmy już tutaj.
Mamy 20 sekund.
Myślę, że tyle nam wystarczy.
Możemy zawsze przejść do ustawień kompozycji i zmienić czas trwania
tej kompozycji, ale 20 sekund myślę, że spokojnie nam tutaj wystarczy.
W porządku.
No i musimy oczywiście pozamieniać te elementy, chociaż tutaj w tym przypadku
nie wszystkie na obiekty wektorowe na Shape To czego nie będziemy zamieniać to
na pewno nie będziemy zamieniać tych avatarów, więc je sobie możemy zablokować.
Możemy sobie.
Albo zanim je zablokujemy, to może zmienimy sobie kolory tym warstwom np.
na Yellow. I teraz sobie zablokujemy.
Będziemy widzieć, że to są właśnie te obrazki.
Awatarów czy chmurki możemy sobie zamienić od razu na obiekty wektorowe.
Czyli tutaj prawy klawisz myszy Create shape from vector layer.
W porządku.
To samo zrobimy z tym drugim Create shape from vector layer i
to, co jest nam niepotrzebne.
Czyli te warstwy Illustratora po prostu sobie usuwamy.
Mamy tutaj warstwę background color.
Też możemy naturalnie wybrać Create Shape vector layer.
Oryginał usuwamy.
I w zasadzie te pozostałe warstwy też możemy przekonwertować na shape wektorowy.
Jeśli tego nie zrobimy, to mimo, że after wie, że to są warstwy Illustratora,
to lot i nasz lot i nie będzie zbudowany z wektorów.
Tak więc musimy to zrobić.
Prawy klawisz myszy Create shape from from vector layer warstwy.
Teraz te warstwy oznaczone ikonką Illustratora możemy usunąć, bo one
nie są nam w żaden sposób potrzebne.
Możemy też zaznaczyć je z wciśniętym klawiszem Command lub Ctrl na Windowsie.
OK.
I co tutaj mamy?
Przede wszystkim warto zwrócić uwagę na to, czy mamy gdzieś te artefakty w postaci
merge, PAF i dodatkowych grup zagnieżdżonych w grupach.
Zaczniemy od grup jest zazwyczaj mniej, więc wpisujemy sobie grup
i kilka tutaj ich jest, więc po prostu sobie je usuniemy teraz.
Nie jest ich jakoś specjalnie dużo.
I jeszcze tutaj jedna i to dwie.
I wybieram delete albo Backspace.
Następnie to co będę chciał zrobić to znajdziemy Merge paf.
Widzę, że też tutaj kilka ich jest i ich też musimy się pozbyć, ponieważ w
momencie kiedy eksportujemy naszą animację do formatu lotu, to w panelu będziemy
mieli czerwony sygnał, że występuje błąd.
Paw zazwyczaj pojawia się wtedy, kiedy mamy tak zwaną ścieżkę złożoną, czyli
komponent PAF aplikacja Adobe Ilustrator.
Na to nie mamy wpływu, ale na pewno musimy zadbać o to, żeby
te elementy sobie tutaj pousuwać.
OK.
Pozbyliśmy się już.
I co teraz robimy?
Skoro mamy wszystko przygotowane do animacji, to oczywiście
wprawia mnie to w ruch.
Część obiektów nam zniknęła, widocznie coś nam tutaj zakrywa i jest to.
Z tego co mi się wydaje to będzie to Select Assistant Panel
czyli ten panel tutaj u samej góry.
Widzę, że on tutaj jeszcze ma jakiś element, który chyba zakrywa to co jest
pod spodem, dlatego, że jego warstwa kiedy go zaznaczymy nie jest
ograniczona tylko do tego elementu, ale ten routing boxy zaznaczenia jakby jest
cały obszar kompozycji.
Więc zobaczmy co tutaj mamy. Content.
Grupa nr 3 Grupa numer 1 to tutaj to Menu Grupa X Grupa nr 2 to
jest napis Grupa nr 3.
To jest chyba ten background, który trzeba tutaj usunąć.
I ja bym to zrobił w ten sposób, że zaznaczymy numer 2, usuniemy o.
I to jest dokładnie to, o co mi chodziło.
Więc teraz mamy to wszystko gotowe.
I to, co teraz zrobimy, to w jakiś sposób fajnie by było ten panel wywołać.
Czyli w momencie kiedy użytkownik wybierze swojego, będzie chciał wybrać asystenta,
to ten panel się rozwinie i będziemy mieli tutaj listę tych asystentów.
Jak to możemy zrobić?
Myślę, że zaczniemy od background u, czyli wybierzemy sobie tutaj ten
background, tą warstwę na samym dole, a następnie spróbujemy rozwinąć.
Mamy tutaj Content Group i mamy.
Ścieżki Myślę, że tu wystarczy w zasadzie jedna ścieżka.
Nie ma potrzeby robić dwóch.
Druga to jest podejrzewam właśnie ten strong, ale on nie jest potrzebny teraz.
Ja bym zrobił coś takiego, że w momencie kiedy ten panel jest klikniemy to
to okno się rozwinie.
Czyli wybierzmy sobie PAF.
Stoper ustawiamy przy powiedzmy 15 klatce.
Natomiast tutaj chciałbym, żeby ten panel podjechał sobie do góry, czyli np.
w ten sposób niech on zwyczajnie sobie przyjedzie z góry o porządku.
Coś takiego.
Tutaj oczywiście będzie trzeba zrobić EFIS, czyli FN czyli function F9.
Możemy naturalnie sterować tym linkiem np.
niech to fajnie nam tutaj zwolni.
O, teraz wygląda to lepiej moim zdaniem.
No i w momencie kiedy już ten panel tutaj, ten background tutaj wjeżdża, to powinny
pojawić się poszczególne elementy. Czyli np.
najpierw powinno się pojawić tutaj.
Select Assistant Panel, czyli tytuł tego panelu.
I może niech on wejdzie w zasadzie na samym początku od góry,
czyli wybierzmy sobie P.
Będziemy tutaj pozycję i np.
niech on się pojawi tutaj na czwartej klatce to wyjedziemy z nim do góry
i też tutaj sobie zastosujemy F9.
O, troszkę chyba za szybko, więc spróbujmy zwiększyć odstęp w czasie
pomiędzy tymi klatkami.
W porządku, tu zaznaczmy sobie jeszcze ten background.
Dobrze by było, żeby on tutaj też był od góry.
A teraz fajnie.
No i teraz pojawiają się poszczególne elementy, czyli czyli
Alias oraz jej awatar.
I myślę, że możemy to zrobić w ten sposób.
Że zaczniemy od awatarów.
I np. wybierzmy sobie S.
Będziemy animować skalę.
Tutaj niech avatar będzie ustawiony na 0.
OK.
Troszkę to chyba.
Za.
Długo się animuje, a teraz niezbyt dobrze to wygląda, więc możemy
tutaj jeszcze zapanować troszeczkę, więc tutaj damy np.
110 tutaj.
dajmy na przykład 95 i np. 100.
OK, zobaczmy.
W porządku.
Nie wiem tylko, czy tak troszeczkę to trwa za długo.
A teraz będzie lepiej.
Dodajmy tutaj leasing. Koniecznie.
Żeby ruch był bardziej naturalny i płynny.
Fajnie.
OK, możemy to w zasadzie dodać do pozostałych awatarów, czyli wybierz sobie
Command C, odblokuj te awatary i tu wybierz sobie Command V
Command v Command V.
OK, i teraz wszystkie pojawiają się dokładnie w tym samym momencie,
ale to nie jest problem.
Później to jeszcze zdejmiemy ten efekt tak, aby pojawiały się jeden po drugim.
Mamy też tutaj te teksty i tutaj chciałbym, żeby one pojawiły się
podobne, w podobny sposób, ale punkt odniesienia przesunę sobie tutaj, czyli
wybieram Y na klawiaturze i mam do dyspozycji możliwość zmiany punktu
odniesienia, aby przełączyć się na narzędzie zaznaczenie wybieram V.
I tutaj w zasadzie możemy skopiować sobie te klatki kluczowe ponownie i wkleić.
Tutaj To co mi się nie podoba to to, że troszeczkę jakby.
Te kropki wychodzą poza Więc wybierzmy sobie S i tu gdzie
mamy 110 może ustawmy sobie 105 o. Teraz chyba lepiej.
W porządku.
No i teraz zaznaczmy sobie to i możemy sobie wkleić do pozostałych tutaj tych.
Tych warstw z opisami poszczególnych poszczególnych asystentów III Command V.
I wszyscy, wszyscy tak samo się pojawiają.
Tylko że tutaj mamy zmienione punkty odniesienia.
Tu chciałbym, żeby punkt odniesienia był w tym miejscu.
Może najpierw ustawmy sobie play check gdzieś na drugiej sekundzie,
kiedy oni się już nie ruszają i punkt odniesienia ustawmy sobie tutaj.
To samo zrobimy z tą warstwą.
To samo zrobimy z tą.
I tutaj też.
OK, i zobaczmy teraz.
Tak, oni się dokładnie pojawiają w tym samym momencie.
To nie jest żaden problem, bo możemy sobie ich Możemy sobie
tę warstwę poprzesuwać w czasie. Czyli np.
tutaj mamy Avatar 1 oraz Alias i to może gdzieś nam się tutaj
pojawić dopiero w tym miejscu.
Potem mamy Avatar 2 i to jest misja i ona niech się pojawi np.
2 klatki, później avatar 3 i Lewi to jest to co się na nich pojawi
trzy klatki później.
Potem mamy te dwie warstwy i też je przesuwamy.
Avatar 5 I to jest avatar.
Też sobie tutaj to przesuniemy po 6 i to jest Kai i też
przesuwamy tu i ostatni avatar.
To jest ten numer 7 i asystent o imieniu Zoe i zobaczmy teraz.
O, bardzo fajnie tutaj jak żaluzje nam się pojawiają Ci asystenci.
Bardzo fajnie to wygląda.
Dał nam to świetny efekt.
To co jeszcze zrobimy, to myślę, że możemy animować jeszcze tę linię.
Mamy tutaj warstwę lines i jeżeli rozwiniemy sobie tutaj grupę
content to mamy w zasadzie 6 8 grup.
Ja bym chciał uzyskać dostęp tylko do ścieżek, więc możemy sobie tutaj wpisać w
wyszukiwarkę path i mamy wyświetlone ścieżki tych tych grup.
Tak więc ścieżki wektorowe, które składają się na te grupy.
I może gdzieś przy pierwszej sekundzie ustawimy sobie stop watch, czyli klatki
kluczowe dla wszystkich tych ścieżek.
Tutaj mamy jeszcze ostatnią ok.
Natomiast tu chciałbym zaznaczyć te końcowe węzły, a
następnie te ścieżki przesuniemy może w ten sposób.
Okay, o coś takiego.
I one po prostu nam się tu rysują ładnie.
Oczywiście byłoby super, gdyby były one ustawione jakoś tak.
Tylko gdzieś tutaj, jakby synchronicznie z tymi pojawiającymi
się awatarami, czyli Select Assistant.
Tutaj chciałbym, żeby już ta różowa się nam rysowała.
I to jest chyba tak, to jest ta ścieżka, więc ona powinna wyrysować się tutaj.
Potem pojawia się Alias i powinna się teraz wyrysować ta ścieżka,
która jest pod nią.
Potem nam się pojawia, mija i tak po prostu sobie to przesuwamy
w ten sposób i będzie to.
I powinno nam dać to całkiem fajny efekt.
Zaraz zobaczymy jak przesuwamy sobie tylko te klatki kluczowe.
OK i zobaczmy teraz.
Bardzo fajnie.
Możemy sobie tą warstwę przyciąć alt i lewy nawias kwadratowy.
To co jeszcze możemy zrobić, to do wszystkich tych klatek kluczowych dodać
sobie I Sing, czyli F9 i klawisz Function na Maku.
Bardzo fajnie.
Ostatnia rzecz, która się tutaj pojawia to naturalnie powinien to być
przycisk New Assistant i on się pojawi dopiero w momencie kiedy pojawi się
skończy się pojawiać ostatni asystent AI.
I teraz mamy ten przycisk.
I teraz myślę, że on się może pojawić.
Więc wybierzmy ES.
Będziemy animować do niego skalę.
Ustawiamy Stop watch tutaj, w tym miejscu, gdzieś przy pierwszej sekundzie.
I tutaj nasz przycisk jest ustawiony, jego skala jest ustawiona na 100%.
Natomiast tutaj myślę, że możemy sobie ustawić 0.
On gdzieś tutaj się powinien pojawić.
Dodałem tutaj Xing F9.
Ok.
I żeby żeby wszystko nie było takie chyba usuwane to może tutaj nie
będziemy dodawać tego efektu.
Gumowate i trochę stawki.
Przejdźmy natomiast do Graph Editor.
Upewniamy się, że pracujemy z prędkością, czyli prawy klawisz myszy.
Edit Speed Graph mamy static i możemy sobie zwiększyć ten
desing dla tego przycisku.
Super!
I teraz kolejna rzecz, którą chciałbym tutaj zrobić.
No to mamy jeszcze ten tak zwany black panel, który daje nam
efekt hover i też w momencie kiedy pojawi nam się mysz np.
tu, to on się powinien pojawić ten efekt hover.
Może zmieńmy mu kolor na czerwony, wybierzmy te na klawiaturze opacity na 0.
Klikam na stop, otrzymamy pierwszą klatkę kluczową.
I tu przy pierwszej sekundzie niech nam się.
Niech nam się już pojawi ten efekt hover. OK.
Może niech jest to to pojawianie trwa troszeczkę krócej.
Dobra.
Może oddalimy to jeszcze troszkę w czasie.
Jeszcze na razie nie dodaję żadnego animowanego kursora.
Kursorem zajmiemy się na końcu, natomiast na razie sam okazujemy sobie ruch.
Tutaj wybieram Shift.
Przy tej warstwie wybieram Shift P, aby też animować pozycję, więc
klikam na stopu tuż przy pozycji.
No i teraz zjeżdżamy niżej.
Tutaj przechodzimy na moje, następnie gdzieś tutaj kilka
klatek, później na Levi.
Potem wybieramy kolejnego asystenta i tam jest tak, że użytkownik wybiera.
A więc tutaj się zatrzymamy.
I w tym momencie widzimy ten ruch.
Niezbyt atrakcyjny? Tak.
Jest jest taki jednostajny, z tą samą prędkością, nienaturalny.
Dlatego możemy tutaj dodać guzik do każdej z tej klatki kluczowej, żeby na każdej
pozycji troszeczkę ten hover tam zwolnił.
Ale możemy też zrobić coś takiego, żeby on po prostu nam przeskakiwał.
Wystarczy, że tutaj wybierzemy sobie prawy klawisz myszy na tych klatkach kluczowych,
a następnie zejdziemy tutaj niżej tego menu.
Nie jest to teraz widoczne, bo znowu jest poza ekranem nagrywania,
więc może ja tutaj podniosę troszeczkę prawy klawisz myszy, tylko zaznaczmy
jeszcze te klatki kluczowe.
Okay.
Prawy klawisz myszy i mamy tutaj toggle hold key iframe.
I teraz te klatki kluczowe tak naprawdę nie animuje tego ruchu pomiędzy sobą,
tylko ten panel będzie nam przeskakiwał.
Zobaczymy teraz jak to będzie wyglądać.
Tu mamy ten efekt hover o widzimy, że on po prostu w ten sposób przeskakuje.
I może to jest fajne rozwiązanie.
Może tak zostawmy.
Byłoby fajnie, gdyby teraz tutaj nastąpił klik.
Na tą aferę i też dobrze by było żebyśmy to jakoś fajnie zaangażowali tutaj.
Ja myślę, że możemy np.
zrobić takiego delikatnego over shorta na tej na tym avatarze i na tym napisie.
Chociaż może na samym avatarze spróbujemy.
W momencie kiedy nam kursor zjedzie tutaj, to może na tej piątej sekundzie niech
nastąpi tutaj jakaś animacja na skali.
Czyli.
Ustawmy sobie klatkę kluczową.
Tutaj przejdziemy np.
kilka klatek do przodu, powiększymy to sobie do powiedzmy stu 10%.
I tu sobie zmniejszymy do 100.
Czyli skopiowałem sobie po prostu tą klatkę kluczową z wartością 100
i wkleiłem tutaj i zobaczmy.
OK, troszeczkę za wolno.
Więc tutaj za pomocą tych piramid jak się przybliżymy do naszej osi czasu.
Zobaczmy teraz. A teraz chyba lepiej.
I nie dość, że nie dość, że mamy tutaj.
Ten efekt na skali to jeszcze fajnie by było, gdyby pojawił się tutaj jeszcze ten
czek, więc może od razu sobie tą warstwę wytniemy wybierając alt i
lewy nawias kwadratowy.
I co do skali, to może po prostu sobie pożyczymy te klatki kluczowe
z początku, bo widzimy, że tutaj nam się z takim owe rzutem fajnie pojawia
ten avatar, więc pożyczymy sobie te klatki kluczowe Command C.
I wracamy tutaj do tego sticka i tu sobie kleimy command V.
I zobaczmy teraz.
O. Całkiem fajnie to wygląda.
Mi się podoba, No ale teraz musimy jeszcze zrobić jedną rzecz.
Mianowicie tu musi nam zniknąć ten tick.
Więc w tym miejscu może przytnie sobie tą tą warstwę stykiem alt i
prawy nawias kwadratowy będzie animować skalę.
I w momencie kiedy tutaj, kiedy następuje klik na tego gościa, To tu
chciałbym, żeby to zniknęło. Czyli skala.
I tu sobie ustawiamy na 0.
Tu dajemy using F9.
Możemy też wybrać prawy klawisz myszy FM Assistant i tutaj wybrać
sobie ISIS na dole.
Zobaczmy teraz.
Bardzo fajnie. Tutaj znika ten trick, a tu się pojawia.
OK.
Jeszcze jedna rzecz jest do zrobienia.
Mianowicie widzimy, że ten plik tutaj cały czas jest.
Dlatego ja myślę, że warto by było podpiąć do awatara numer jeden.
To jest ten.
Czyli wybierzemy sobie PKP i prze przeciągamy sobie do warstwy AV 1 i teraz
pojawia się to razem z avatarem.
Ciach, ciach, ciach, klik. Fajnie.
No dobrze, tylko teraz jak już to kliknie, jak już pojawia się ten klik to myślę, że
fajnie by było schować ten panel i generalnie możemy to
zrobić na dwa sposoby.
Ja chyba tutaj wybiorę ten sposób prostszy, bo możemy jakby.
Zrobić tą animację od tyłu, czyli siup wszystko nam znika.
I to też w zasadzie jest to fajny, fajny, fajne rozwiązanie, żeby
nam to wszystko zniknęło.
Ale tak naprawdę jako kompozycję możemy ten panel w całości podsunąć do góry
i chyba to będzie lepsze rozwiązanie.
Później jak już będziemy z tym pracować to zobaczysz jak to wygląda Na teraz
ten panel otwiera się bardzo fajnie i mi się jak najbardziej podoba.
Ten efekt jest bardzo miękki, płynny i tak to zostawmy.
Zapisują zmiany.
Ja sobie zapisałem ten plik pod nazwą AIS up Moka Website Animation.
A teraz przechodzimy do kolejnej lekcji, gdzie montujemy sobie kolejną kompozycję,
a później już będziemy wszystko montować w całość.
No teraz to wszystko. Do usłyszenia.