Framer - Animacje i efekty specjalne
W tym wpicie spróbujemy użyć Framer'a w bardziej kreatywny sposób. Nawiążemy do topowych animacji z najlepszych stron i wykorzystamy je w praktyce, podczas wdrożenia naszej strony
Podstawowe animacje stosowane na typografii.
https://framer.university/resources/text-color-animation-code-component
https://minhpham.design/
https://framer.university/resources/text-scroll-animator-component-for-framer
Scroll Animator Component. Pamiętamy o zmianie opacity efektu na 0
Scramble effects
https://framer.university/resources/text-scramble-appear-effect-in-framer
Looping - Animacja, która się powtarza. Jedną nakładamy bezpośrednio na obiekt z offset y 40. Zamykamy obrazek w stack ctrl+alt+enter i na stack również nakładamy efeect loop, ele tym razem z rotacją. Uprzednio przekręcamy, nasz obrazek jeżeli chcemy otrzymać efekt "kołyski"
Adaptujemy pomysł na cały container
Jest to po prostu ustawianie różnych scroll speed w obszarze animacji, robiliśmy to w zeszłym roku
Patenty z animacją on press / on hover
Ćwiczenie z Animacją 15-30 min
BONUS
Canvas Site
Tworzymy prosty stack. Desktop pionowo, grid poziomo, w śfrodku zwykły Frame - F, z dużym rozmiarem np. 3000x3000
Dopracowujemy
Tworzymy strukturę z siatką
Jeżeli na całym trzymającym stacku nałożymy ScrollSection nadając mu np. nazwę container. Następnie zmienimy w opcji grab przesuwanego containera z free form na container dodamy tzw.boundry. Zabezpieczy to container przed wysunięciem się poza.
Dodajemy opcje drag do elementów zdjeć
Dodajemy animacje hover i press do przeciągania
