Webflow: Elementy Animacji

Webflow 2020+

0:00Od poprzedniej lekcji.

0:01Nie poruszyłem żadnego piksela w tej lekcji przyszedł czas na

0:03animację webflow czyli coś naprawdę ekscytujące zwłaszcza jeżeli kiedykolwiek

0:08robiłeś pisałeś animacje w CSS -ie wiesz, że to jest naprawdę trudne.

0:13Dużo czasu zajmuje czas te efekty nie są takie jakich byśmy oczekiwali.

0:16Trzeba sporo nad tym siedzieć . Dłubać tymczasem webflow daje nam interfejs

0:21graficzny gdzie możemy po prostu animację sobie wyklikać. Jest to niesamowite.

0:25W momencie kiedy już przyzwyczaili się do pracy z animacjami. W ten sposób już nigdy

0:28nie wrócić do starych sposobów ażeby zacząć pracę z animacjami przechodzimy

0:32do sekcji interaction czyli ostatniej sekcji tej w prawym górnym rogu

0:36w której jeszcze nie byliśmy wciskaj "H" na klawiaturze albo klikamy w tę ikonkę pioruna.

0:40Musimy zacząć tworzenie animacji od

0:44tzw. trigera czyli od czegoś co tą animację wywoła.

0:47Mamy tutaj dostępne dwa typy trigerów są to element trigger oraz page trigger.

0:51Co do zasady page trigger to są takie trigery

0:54które odbywają się w zasadzie automatycznie.

0:57np. jak strona się ładuje albo w jakiś sposób zmienia swój stan.

1:00Wtedy możemy zareagować.

1:03np. uruchomić zaraz po ładowaniu jakąś

1:05animację. Użytkownik nie musi mieć z tym absolutnie nic wspólnego.

1:09Natomiast te element trigery to są takie

1:12wyzwalają się które włączają nam animacje w momencie kiedy ktoś

1:17np. kliknie w jakiś element na

1:19naszej stronie albo najedzie na coś czyli zwykle są one związane

1:23z jakąś akcją podejmowaną przez użytkownika.

1:26Właśnie taki element trigerami

1:28powinniśmy zająć się w pierwszej kolejności po to żeby animować.

1:32Nasze pytanie i odpowiedź.

1:35Rozpoczynamy więc od dodania triggera za pomocą tej ikonki plusa ale tak naprawdę jest wiele

1:39sposobów wiele podejść które możemy wykorzystać do tego aby osiągnąć

1:43zamierzony efekt. Ten efekt który chcemy osiągnąć polega na tym, że przejdźmy na

1:48chwilę do master elementów w xd, że mamy ten deafult state czyli stan

1:54domyślny, a następnie po kliknięciu w taki kafelek będziemy chcieli go rozwinąć.

2:00To jaką zrobimy animację. Zobaczymy.

2:03Stosujemy tutaj pewne parametry natomiast

2:06ważne jest to, że ten nasz stan początkowy. A teraz jeszcze w wkleje tutaj tekst żeby

2:11przynajmniej mieć jedno pytanie dobrze zrobione.

2:14Teraz ten stan początkowy możemy

2:17zrobić tak naprawdę na dwa sposoby albo możemy zainicjować naszą animację stanem

2:21początkowym czyli już teraz poprzestawiać różne rzeczy ukrywać

2:25np. ten paragraf , dopiero stworzyć animację

2:28albo możemy wewnątrz samej animacji ustawić jej stan początkowy, to tam po

2:33przestawiać wszystko tak żeby było po ukrywane.

2:36Więc co do zasady przed tym jeszcze jak

2:38klikamy ten trigger: dwa podejścia albo ustawiamy tak jak ma być na początku albo

2:43zostawiamy tak jak ma być na końcu, a w samej animacji to zrobimy.

2:46Moje podejście jest takie, że zwykle

2:48układamy sobie na początku właśnie taki stan ten stan początkowy, a dopiero później

2:53włączam w animacji poszczególne elementy. Od tego chciałbym wyjść.

2:56W związku z tym zanim jeszcze dodam ten

2:59element trigger to spróbuję uzyskać z tego stan początkowy oczywiście nie będę

3:03wyrzucał żadnych rzeczy tylko po prostu FAQ item answer

3:06modyfikuje w taki sposób, że po prostu to ukryje czyli przejdę do stylów.

3:12Przejdę do sekcji layout, a następnie display ustawie na none. Teraz po

3:16przedstawieniu tylko jednej właściwości od razu mam stan początkowy.

3:20No to mogę przejść "H" do animacji. Teraz ważne jest na czym zrobimy tę animację.

3:25Musimy zaznaczyć to na czym chcemy żeby

3:28nasza interakcja miała miejsce. W tym przypadku jest to FAQ item .

3:31Dlaczego FAQ item , a nie questions .

3:33np. dlatego że chcemy żeby użytkownik po kliknięciu w cały ten kafelek czyli w cały FAQ item

3:38uzyskał animację więc zaznaczam FAQ item upewnij się, że zaznaczone, a

3:42następnie wybieram element trigger dodaje plus.

3:46Jakie mamy triggery mamy np. najechaniu myszką.

3:48Możemy przy poruszaniu nad elementem albo w momencie gdy taki element wjedzie nam do

3:52widoku użytkownik będzie skrolował na pewno często widziałeś takie animacje gdzie skrolujemy

3:56stronę. Dopiero jak skrolujemy to się coś pojawia.

4:00Skrolujemy niżej znowu się coś pojawia. To właśnie to też możemy zrobić.

4:03Natomiast my skorzystamy z najprostszej

4:06opcji czyli kliknięcia ewentualnie na urządzeniach dotykowych tąpnięcia.

4:09Tak to jest w nawiasie.

4:11Po nałożeniu takiego triggera możemy zdefiniować. Co się stanie po pierwszym

4:16kliknięciu. Po drugim kliknięciu, a także mamy pewne jego ustawienia.

4:19O tym porozmawiamy później o drugim kliknięciu też porozmawiamy później.

4:22Teraz interesuje nas

4:24coś jest nie po pierwszym kliknięciu. Możemy tu wybrać akcję teraz mamy do

4:29wyboru szereg takich predefiniowanych różnych akcji

4:32w sekcji appear & disappear czyli związanych z tym że coś będzie się pojawiać czyli

4:36np. gdybym wybrał coś takiego jak fade to teraz mogę podejrzeć jak to wygląda.

4:42Zobaczę po kliknięciu to się pojawi, a najpierw było ukryte.

4:45Kolejny typ akcji to są akcje które kładą

4:48nacisk na element który jest cały czas widoczny.

4:51Czyli będzie to cały czas widoczne ale gdy

4:53np. wybiorę pulse. To teraz mogę to podejrzeć.

4:56Po kliknięciu będzie sobie o pulsować przez chwilę.

4:59Mogę to zmienić na coś innego

5:01np. bounce, wtedy będziemy mieli jakiś. W ogóle taki bardziej efekt podskakiwać po kliknięciu.

5:07Szereg predefiniowanych rzeczy możemy tutaj ustawić, że po kliknięciu

5:11będziemy czekać jakąś określoną ilość milisekund

5:14np. jeden tysiąc milisekund czyli jedną sekundę. Dopiero to się otworzy zresztą jest tu też

5:18opcja preview która pozwala nam podejrzeć. Dla niektórych elementów

5:22np. grow.

5:22Jeśli wybierzemy mamy jakieś dodatkowe właściwości czyli mamy direction.

5:26Ten element ma rosnąć w momencie gdy wybierzemy sobie przykładowo fly to

5:30będziemy mieli kolejne właściwości do ustawienia z której strony

5:34ma wlecieć czy ma fly in czy ma w lecie czy wylecieć . Z której strony z lewej, z

5:38prawej itd. więc są tutaj pewne definiowane efekty z których możemy skorzystać.

5:43Ale jeżeli żaden z tych efektów nam nie odpowiada tak jak w naszej sytuacji to

5:47wtedy przechodzimy do tej sekcji custom animation. Wybieramy start and animation.

5:51Oczywiście wszystkie te animacje można

5:53sobie odtworzyć customowej animacji ale w takiej animacji można zrobić zdecydowanie

5:58więcej no ale też zajmuje to trochę dłużej trochę więcej czasu więc wybieramy time

6:02animation. Klikamy na ikonkę plusa bo nie mamy jeszcze żadnej z której możemy wybrać

6:06więc musimy zrobić nową klikamy plus. Mamy new time animation.

6:10To będzie efekt FAQ question open. Teraz będziemy dodawać

6:15tzw. akcję do tej animacji.

6:17Dlaczego to jest super dlatego, że pozwala nam w pewnym sensie oderwać ten trigger

6:21czyli naszym triggerem jest kliknięcie w FAQ item od tego co będzie animować.

6:26Czyli my możemy zdecydować, że klikniemy w FAQ item to będziemy animować menu.

6:30Chodzi tu o to aby zaznaczyć właściwy element nawigatorze, a następnie dodać do

6:34niego akcję czyli przykładowo gdybym ja chciał teraz pokazać FAQ item answer który

6:39jest ukryte to klikamy na tym elemencie w nawigatorze.

6:42Dodaje Teraz akcje te akcje są różne.

6:45Mamy transformację mamy style takie jak

6:48np. zmiana oppacity czy background color. Mamy też

6:50możliwość zmiany rozmiaru lub też pokazania czy ukrycia elementu więc będzie

6:54mi zależeć na tym żeby teraz ten element odkryć więc wybierał akcję high/show.

6:59Zostało to dodane, a te najważniejsze

7:01właściwości dotyczące tego czy to pokazujemy czy ukrywamy.

7:03Zawsze są tutaj na samym dole.

7:05W tym przypadku modyfikuje właściwości CSS-ową

7:08display. Wcześniej ja ustaliłem ją na none.

7:11Więc teraz żeby coś pokazać wystarczy, że zmienię tę właściwość display na block.

7:15Gdybym zrobił tylko tyle to już ta odpowiedź się pojawia.

7:18A ja mogę przetestować command shift "P". Po prostu kliknąć na to. Widzę jak działa

7:23moja animacja nie jest ona jeszcze jakaś fascynująca ale działa.

7:26Czyli co możemy teraz jeszcze zrobić.

7:29Możemy np. z animowanej sobie jakieś inne elementy bo

7:31mamy tutaj całą linię czasu na którą możemy sporo rzeczy powrzucać.

7:35Przykładowo gdybyśmy chcieli kliknąć na tę ikonkę. Ją teraz obrócić o sto osiemdziesiąt stopni.

7:40To poza znaczeniu ikon dwa. Wybieramy nową akcję.

7:42pewnie znajdę tu coś takiego jak wybieram rotation.

7:45Właściwości są na samym dole.

7:47Możemy rotować to po osi x, y albo z.

7:50My chcemy rotować po z. Ustawić to na minus sto osiemdziesiąt stopni.

7:53Teraz jeśli kliknij tutaj podgląd zobaczy

7:55na strzałeczkę. Ona automatycznie zaczęła się obracać.

7:58Co jeszcze przydałoby się tutaj zrobić.

8:00Jeśli zaznaczyć FAQ item to możemy dodać

8:03akcję polegającą na tym, że zmienimy background kolor na nasz kolor.

8:08wybieramy na dole midnight blue, a dodatkowo jeszcze kolejna akcja zmieni

8:13nam tekst kolor na kolor biały czyli chcielibyśmy mieć treści na biało.

8:19Znów podejrzymy całą tą animację.

8:21W zasadzie to najlepiej jest zrobić już podglądzie czyli command shift "P".

8:24Teraz klikamy patrzę jak ta animacja wygląda.

8:27Generalnie te rzeczy które chciałbym się zmieniają.

8:29Problem który mamy na ten moment jest to, że zmieniają się one w złym czasie.

8:33Chciałbym żeby to było bardziej dynamiczne. żeby te elementy zmieniały się razem.

8:37To jest właśnie druga rzecz o której

8:38porozmawiamy czyli timing animacji. Zapraszam do kolejnej lekcji.