Webflow: Animacje na stronie cz. 2

Webflow 2020+

0:00Drugi pomysł na fajną animację to animacja

0:03otwierająca i nie w przypadku każdych stron możemy sobie pozwolić ale w

0:07przypadku stron produktowych czy prostych wizytówek wydaje mi się że oszczędne

0:11zastosowanie takiej animacji może być ciekawe.

0:13Mam tutaj na myśli stopniowe pojawianie

0:15się różnych sekcji strony w miarę gdy jest ona ładowana.

0:18Możemy przykładowo zaznaczyć sobie jaki Hero header później ten hero

0:22image i po kolei pokazać te dwa elementy, a później pokazać feature Grid

0:27i w takiej sytuacji naturalnie będziemy korzystali z interakcji i page triggerem.

0:31W tym przypadku będzie zdarzenie Page load w momencie gdy nasza strona się ładuje

0:35czyli start loading albo po tym jak zakończy się ładować.

0:39Szczerze mówiąc możemy to zrobić.

0:40MP Page start lobbing wybieramy sobie

0:43starter Animation i dodajemy tutaj animację możemy ją nazwać opening

0:49sequence i teraz to co jest ciekawe to my nie chcemy.

0:53W zasadzie moglibyśmy tak zrobić że przejdziemy features grid np.

0:57do stylów i zmienimy tutaj opacity na zero.

0:59Problem w tym że będzie trudno nam później nad tym pracować w webflow wejdziemy z

1:03powrotem do edytora i moment gdzie jest mój features grid prawda.

1:07Więc nie robimy tego właśnie po to co się teraz do animacji na pages Load i na

1:13opening sequence i właśnie po to mamy możliwość

1:16stworzenia animacji która nam coś za inicjuje w tym miejscu czyli wybieramy

1:20którą Hero header klikamy na plus i wybieramy opacity .

1:24Następnie wyjeżdżamy z opacity do zera ale deklarujemy że jest to

1:29set as initail state że jest to początkowy stan tej animacji.

1:32No i teraz możemy to samo zrobić na tym kolejnym elemencie.

1:35Znów dodajemy do niego opacity i ustawiamy je na zero

1:41ale upewnij się że też jest w tym initail state.

1:43Możemy to po prostu przenieść w ten sposób

1:46i jeszcze Features grid zrobimy tutaj też dodamy opacity.

1:51Ustawimy to na zero.

1:53Możemy też po prostu kliknąć

1:55set as initail state i przeskoczy do odpowiedniego miejsca.

1:59Teraz najpierw zajmujemy hero header czyli

2:02tutaj opacity ustawiamy na 100 i pół sekundy animacji.

2:06Moim zdaniem to jest ok ale dodatkowo ustawiamy jakiś minimalny delay na

2:11przykład dwie dziesiąte sekundy żeby trochę poczekać żeby od razu nam to nie

2:15zaczęło się animować więc na pierwszy element ustawią dwie dziesiąte sekundy.

2:19Kolejny będzie div bloc który chcemy zaanimować tutaj.

2:23Będzie to opacity.

2:24Zostawiamy tak jak jest pół sekundy animacji bez opóźnienia i Features grid

2:29stawiamy to tutaj opacity i też zostawiamy domyślne

2:32ustawienia teraz jak za twierdzimy sobie tą animacje.

2:35To plus jest taki że nic nam nie znika nie mamy tego stanu wyjściowego z opacity zero

2:39wszędzie więc możemy wejść do podejrzeć i zobaczyć że wszystko nam się ładnie.

2:44Po kolei sekwencji nie zapala.

2:46Drugi sposób na zrobienie tego typu animacji to jest zrobienie jej w taki

2:50sposób gdy jakiś element wchodzi w widok przykładowo mamy całą tą sekcję standard.

2:55Gdybyśmy chcieli ją w ten sposób zanimować to zaznaczamy całe standard następnie w

2:59interakcjach nie będziemy korzystali z page trigger tutaj jest coś takiego jak

3:02przez scrolowanie i well page in scrolling.

3:04Tyle że przez scrolowanie dotyczy konkretnego offsetu od góry okna

3:08przeglądarki, a na elemencie my też mamy takie dwie akcje Scrolls

3:13into view and white scrolling in view.

3:14Czyli w momencie gdy się ten element wscroluje w widok czyli

3:19gdy on zacznie być widoczny czyli gdy zobaczymy pierwszy piksel od dołu

3:23scrolując zobaczymy pierwszy piksel tego elementu to coś się stanie albo możemy

3:28zrobić taką akcję continue czyli gdy scrolujemy to może ta animacja jak gdyby

3:33sekwencyjnie zachodzi czyli jak ja będę s crolował trochę w górę to animacja

3:37pojedzie trochę w górę w sekwencji jeżeli będę w dół to zjeździe w dół.

3:40I to jest ciekawe do zrobienia.

3:41Nie wiem obracając się obiektów 3D np.

3:44w naszym sklepie czy coś takiego ale tym czasem skorzystamy ze Scrolls into view

3:48i teraz jako możemy zrobić Scrolls into view albo Scrolls out view.

3:52Nam chodzi o to że jeżeli to wejdzie

3:54widok, a nie zejdzie z widoku to zaczynamy sobie animację.

3:57No i znów zrobimy nową animację którą nazwiemy standards

4:04animation albo opacity albo coś takiego.

4:08I tutaj moglibyśmy dodać po prostu

4:09opacity na zero i zainicjować to oczywiście z takim opacity .

4:14A następnie moglibyśmy dodać opacity na 100 procent i tyle.

4:20No i jeżeli spróbujemy podejrzeć taką animację.

4:23Tyle że wejdziemy tutaj to teraz zobacz na samym dole jak ja tylko wjadę.

4:29Ten element to od razu mi się pojawi.

4:31Nawet nie było tego widać dwa sposoby na które możemy to zmienić np.

4:36opóźnić tę animację o pół sekundy.

4:38Przykładowo w tej sytuacji w momencie

4:41kiedy ja wjadę w widok czekam pół sekundy i dopiero się to zapala.

4:45Ale ludzie scrolują z różną prędkością więc to nie jest szczerze mówiąc optymalny

4:49sposób na to jak można coś takiego zapalać.

4:52Zamiast tego ten delay zmienił bym na zero.

4:55Można skorzystać tutaj we właściwościach Scrolls into view z jakiegoś offsetu.

4:59Przykładowo jeżeli założymy offset wielkości około 50 proc.

5:03to znaczy że ja będę musiał widokiem przez

5:06przescrolować się dotąd czy też mniej więcej połowa wysokości

5:10tego contenera standard czyli dolna część strony będzie musiała być w połowie.

5:15I dopiero teraz animacja zacznie odpalać.

5:18Czyli to jest dużo lepszy pomysł i zobacz

5:20jak to będzie wyglądało ze scrolujemy się tutaj jeszcze nic nie ma

5:24ale gdy jadę do połowy to automatycznie mi się to zacznie pojawiać.

5:28I naprawdę polecam się z tym bo

5:29eksperymentować bo można zrobić mnóstwo fajnych rzeczy.

5:32Przykładowo te standardy które tutaj mamy

5:34można było zainicjować jeszcze jedną właściwość czyli właściwość przykładowo

5:39move i odsunąć to na osi igreków do góry powiedzmy o jakieś 30 pikseli.

5:44Wystarczy teraz w tym miejscu zrobimy move

5:47i damy tu na osi y na 0 czyli przesunięty o te 30 pikseli w dół i w ten sposób

5:52będziemy mieli taką fajną akcję pojawiania się i jednocześnie zjeżdżać w dół.

5:56Pokażę ci jak to wygląda od samego początku od samej góry.

5:59Wjedza nam to widok i fajny sposób się opuszcza.

6:03Jeśli chcemy możemy zrobić to w sposób

6:05odwrotny czyli żeby ta animacja nie podążała za myszką tylko

6:09w sekcji move zrobimy tutaj zamiast minus 30 30 pikseli.

6:13Już ten efekt będzie zupełnie inny bo gdy wejdziemy w widok to się pojawi od dołu.

6:18Teraz wygląda nawet dużo lepiej.

6:20No i wyobraź sobie że teraz masz taki lub blue print do animacji.

6:23Czyli mógłbyś na przykład kliknąć prawym i zmienić tutaj target.

6:28I tak jak my zrobiliśmy te wszystkie

6:30sekcje mają inne klasy ale za to content jest ten sam.

6:34Przykładowo można było taki był blue print

6:36animacji zastosować do wszystkich contentów co znaczy że w momencie

6:40scrolowania naszej strony gdy będzie nam wchodził content w widoku on automatycznie

6:44się zajmuje zanimuje i to jest naprawdę dosłownie kilka kliknięć.

6:47Więc mam nadzieję że widzisz już potencjał i nie będę tego wszystkiego pokazywał.

6:51Jedna rzecz którą chcę jeszcze zrobić na koniec to odsunąć czyli robić margines na

6:56form nie ma żadnego marginesu na footer już są jakieś paddingi więc ustawiamy w

7:00tym miejscu po prostu potrzebuję te sekcje trochę bardziej rozsunąć i również

7:05upewnić się że w tych widokach mobilnych będzie to dobrze wyglądało.

7:08W momencie gdy będzie już za wysoko to zmienimy.

7:11Ale wygląda na to że jest OK więc

7:13może tutaj ten footer section troszeczkę bliżej zrobimy.

7:16O właśnie tak.

7:18No dobrze i wygląda na to że udało nam się uporać z tym podstawowym projektem strony.

7:24Tu oczywiście można masę rzeczy jeszcze

7:26zmieniać edytować dodawać jakieś fajne interakcje.

7:29Jak widzisz teraz to już naprawdę bardzo szybko nam idzie ponieważ poznaliśmy całe

7:32podstawowe Flow więc dziękuję Ci za uwagę w tej lekcji.

7:35Kolejny jeszcze mały bonus bo obiecałem ci

7:38że pokażę jak można w prosty sposób obsłużyć formularz na stronie i to zrobimy

7:42za chwilę a później zajmiemy się publikacją naszej witryny.

7:45I to będzie wszystko. Do usłyszenia.