Webflow: Ustawienia Targetu Animacji

Webflow 2020+

0:00Witaj w kolejnej lekcji. Stopniowo ale cały

0:02czas rozbudowujemy naszą animację i uczymy się tego jak działa to w webflow.

0:05Jeżeli dalej jesteś w edycji animacji FAQ question close to wybierz polecenie done.

0:10Powinieneś wrócić do panelu interakcji, a jeśli masz zaznaczone FAQ item który ma

0:15przypisane z pomocą tego małego pirounka jest to sygnalizowane interakcje.

0:19To wtedy powinieneś widzieć dokładnie w takim stanie czyli po pierwszym kliknięciu

0:23mamy pierwszą animację FAQ question open którą zrobiliśmy, po drugim kliknięciu jest

0:27wykonywana FAQ question close ta animację można podejrzeć wybierając np.

0:31preview.

0:31Tutaj możemy zobaczyć jak one zachodzą na canvasie scenie.

0:35Poza tym znajduje się tutaj też trigger settings, a sekcja pozwala nam dostosować.

0:41Czy wszystkie te animacje mają być

0:43odkrywane w rozmaitych widokach tabletowym, landscape i portretowym.

0:47Można to dostosować można wyłączać je po prostu widokach z reponsywnych

0:50ale poza tym znajduje się jeszcze jedna ważna rzecz czyli możliwość zrobienia

0:55stworzenia tej animacji dla pojedynczego elementu na który

0:59klikamy albo dla wszystkich elementów które mają jakąś klasę.

1:03Jeżeli przełączymy to na klasę. W ten

1:05prosty sposób włączyliśmy tę samą sekwencję animacji na wszystkich elementach FAQ item.

1:10Zobacz, że jest to odzwierciedlenie w

1:11nawigatorze bo wszystkie elementy FAQ item w kolumnie pierwszej, w kolumnie drugiej

1:15dostały teraz interakcje i powinny działać.

1:17Jeśli podejrzymy to teraz klikając na

1:19heading w kolumnie drugiej, w kolumnie pierwszej, to wszystko działa.

1:23I to wszystko działa indywidualnie niezależnie od siebie.

1:27Dlaczego to działa niezależnie od siebie.

1:28I to jest też bardzo istotne pytanie, a zarazem taki temat trochę bardziej

1:33zaawansowany webflow w kontekście tego jak te animacje są tworzone.

1:36Jeśli przejdziemy do FAQ question open czyli do tej pierwszej animacji którą

1:39stworzyliśmy. Zobaczysz, że znajdują się tu różne ikonki czyli ikonka niebieska, zielona.

1:44Dość kluczowe do sprawnego poruszania się animacjach w webflow jest

1:48zrozumienie co te ikonki oznaczają i skąd one się w ogóle wzięły.

1:52Jeśli zaznaczamy

1:54np. FAQ item to mamy tutaj taką sekcję jak affect

1:57czyli czego dotyczy ta animacja konkretnie które elementy będą się animować.

2:01No bo wiesz o tym, że mamy FAQ itemów bardzo dużo. Gdyby webflow miał wywoływać te

2:07animację na wszystkich klasach FAQ item no to mielibyśmy małą katastrofę.

2:12Możemy to wyemulować zmieniając to pole.

2:14Affect na klasę i teraz jeśli podejrzymy sobie . To kliknięcie jednego elementu powoduje,

2:19że animacją się wszystkie te klasy oczywiście możemy tak zrobić.

2:23Ale generalnie to jak to działa w webflow

2:25jest bardzo bardzo sprytne domyślnie ponieważ było tutaj zaznaczone.

2:29To inter-action trigger.

2:30Otóż w pierwszej kolejności webflow wie co jest triggerem tej całej animacji.

2:35Przypominam że triggerem było kliknięcie FAQ item dlatego on ma tutaj ten piorunek więc webflow

2:41wie, że kliknięcie na ten FAQ item właśnie ma wywołać animację.

2:45Jeżeli edytujemy właściwości tego elementu który jest triggerem to zawsze webflow domyślnie

2:52będzie tylko i wyłącznie aplikować te animacje do tego jednego elementu do

2:57jednej instancji tej klasy. Która jest triggerem ale nie zawsze jest tak kolorowo

3:02bo nie zawsze przecież elementy które wybieramy i animujemy. Stąd są triggerami.

3:07W związku z tym przykładowo jeśli

3:09wybraliśmy FAQ item answer. No to on nie jest triggerem.

3:12Pamiętasz no bo mamy piorunek na FAQ item żeby ktoś

3:14klikał, a nie FAQ answer.

3:18W związku z tym webflow nie widzi w tym triggera.

3:21No i bardzo dobrze ale jednocześnie chcemy

3:23żeby webflow tylko jeden FAQ answer zaanimował to który jest de facto dzieckiem tego naszego

3:30głównego elementu czyli FAQ item, a nie żeby zaanimował wszystkie FAQ answer

3:35A nie żeby się znowu rozwijały wszystkie odpowiedzi.

3:38W związku z tym jak to jest zrobione znów

3:40domyślnie zobacz, że poza znaczeniu tego domyślnie będzie to miało affect class .

3:45Nie możemy wybrać interactons trigger bo to

3:47nie jest interactions trigger ale możemy wybrać klasę ale webflow.

3:51Za nas już przypisał tutaj, że to ma dotyczyć tylko. Wyłącznie dzieci czyli tych klas

3:58które są dzieckiem tego naszego interaction triggera.

4:01Więc jeśli coś jest wewnątrz interaction triggera. W środku to wtedy tylko i

4:06wyłącznie wtedy będzie animować znowu gdybyśmy wybrali wszystkie elementy

4:10wszystko by się na całej stronie animowało co tylko jest FAQ answer, a

4:14w momencie gdy wybieramy only children with this class to znaczy że patrzymy na interakcję trigger

4:18jeżeli jego dzieckiem jest FAQ item answer to będzie animowane tylko jedno FAQ item answer.

4:24Dobra no to co jeszcze możemy tu wybrać.

4:26Możemy jeszcze wybrać rodzeństwo czyli

4:28jeżeli mielibyśmy nie taką strukturę, że FAQ item answer jest dzieckiem FAQ itema-a, a tylko

4:34rodzeństwem no to wtedy moglibyśmy wybrać tą opcję.

4:37Gdyby natomiast było parentem w strukturze wyżej moglibyśmy wybrać tę

4:42opcję. Domyślnie webflow zachował się dobrze rozpoznał że FAQ item answer jest dzieckiem

4:47naszego triggera i tylko w przypadku tego dziecka będzie odpalał animacje.

4:51Dzięki temu mamy pewność, że strzałka też działa poprawnie.

4:54Jeśli przejdziemy na ikonkę zobacz też ta rotacja została dodana do klasy.

5:00Klasa ma ustawione, że tylko jako jest

5:02dzieckiem tego naszego interaction trigera wszystko będzie działać poprawnie.

5:06Ale pamiętaj o tym, że zawsze mamy możliwość to zmienić w tym przypadku

5:09akurat webflow sobie doskonale poradził i odczytał nasze intencje.

5:13Również dzięki temu, że my dobrze

5:15przygotowaliśmy strukturę że te elementy są jedne w drugich i tak dalej.

5:19Natomiast czasem zdarzy się tak że webflow po

5:21prostu nie poradzi sobie z tym pisaniem odpowiednio i wtedy musimy mu pomóc

5:25zmieniając ustawienia albo będziemy chcieli celowo zrobić to inaczej.

5:29Przykładowo na trigger poza ładowaniu strony będziemy chcieli pokazać

5:33jednocześnie kilka elementów i je animować.

5:35I wtedy możemy wybrać sobie żeby to dotyczyło wszystkich klas, na stronie.

5:39Możemy jeszcze odwrócić taką

5:41sytuację i wybrać coś takiego jak selected elements.

5:46To znaczy, że ta animacja będzie uruchamiania

5:49tylko na zaznaczony przeze mnie icon dwa.

5:52Gdybym to wybrał i gdybym klikał sobie w inne FAQ itemy

5:56np. ten w drugiej kolumnie środkowy, to tak czy inaczej by mi się animowała ta strzałka.

6:01W pierwszym ta strzałka zaznaczona czyli nieważne który bym wybrał element to

6:05zawsze będzie się animowała ta jedna strzałka.

6:07Oczywiście to jest bez sensu w naszym

6:09przypadku więc zostawiamy tutaj dzieci naszego triggera.

6:13Można powiedzieć, że w podstawowym kształcie nasza animacja jest gotowa, a

6:16także rozumiesz wszystkie prawie te rzeczy które znajdują się w panelu animacji.

6:20Poza jedną ważną właściwością czyli set as initial state, a także easing-em. Te dwie rzeczy zrobimy w następnej lekcji

6:27trochę dopracowując jeszcze naszą animację.

6:29Do usłyszenia.