25 przykładów Framer Motion (Motion for React) działających na żywo: pojawianie się, stagger, layout, wspólne elementy, modale, akordeony, przeciąganie, postęp przewijania, przejścia stron i ograniczony ruch.
Framer Motion, wydawany dziś jako Motion for React, animuje każdy element, który zamienisz na komponent motion: ustaw propsy initial, animate i transition. 25 poniższych przepisów działa na żywo na tej stronie, każdy z kodem do skopiowania: wejścia, stagger, przeciąganie, layout i wspólne elementy, animacje wyjścia, postęp przewijania, przejścia stron i ograniczony ruch.
Instalacja
Każde demo to kod obok niego, uruchomiony w Twojej przeglądarce. Przepisy korzystają z pakietu motion; jeśli Twój projekt nadal używa framer-motion, komponenty i propsy są takie same, różni się tylko ścieżka importu.
Tak. Biblioteka zmieniła nazwę na Motion, a część dla Reacta importuje się z motion/react. Pakiet framer-motion jest nadal publikowany z tym samym API, więc starsze tutoriale dalej działają.
Element musi być bezpośrednim dzieckiem AnimatePresence, mieć unikalny key i prop exit. Jeśli rodzic AnimatePresence też zostanie usunięty, nie zostaje nic do animowania.
Animuj height od 0 do "auto" na elemencie motion i ustaw overflow na hidden. Motion sam zmierzy rzeczywistą wysokość, czego przejścia CSS nie potrafią.
Komponenty motion korzystają z API przeglądarki, więc plik, który je renderuje, potrzebuje "use client". Komponent serwerowy nadal może wyrenderować taki komponent kliencki i przekazać mu children.
Nie, jeśli trzymasz się transformacji i opacity, które działają bez ponownego przeliczania układu. Duże animacje layoutu i wiele elementów naraz kosztują więcej; testuj na telefonie ze średniej półki i używaj LazyMotion, aby odchudzić bundle.
Propsy i hooki użyte na tej stronie
initial to pierwsza klatka, animate to miejsce, w którym animacja się kończy. Do jednorazowego wejścia nic więcej nie trzeba.
Ruch po y korzysta z transformacji CSS, więc element w trakcie ruchu nigdy nie przepycha sąsiadów.
Variants to nazwane stany. Rodzic przekazuje swój stan w dół, a staggerChildren opóźnia każde dziecko trochę bardziej niż poprzednie.
whileInView uruchamia animację, gdy element wchodzi do viewportu; once: true sprawia, że nie odtwarza się przy każdym przewinięciu.
Tablica to lista klatek kluczowych. times rozkłada je w czasie trwania, od 0 do 1.
whileHover i whileTap animują do stanu na czas trwania gestu, a potem same wracają.
dragConstraints może przyjąć ref do elementu nadrzędnego, więc elementu nigdy nie da się przeciągnąć poza niego.
Przeciągaj w jednej osi, a potem odczytaj przesunięcie i prędkość w onDragEnd, aby zdecydować, czy karta znika, czy wraca na miejsce.
Reorder.Group trzyma tablicę w stanie i podaje Ci nową kolejność. Każdy Reorder.Item potrzebuje wartości, którą reprezentuje.
Animowanie x przez kilka klatek kluczowych daje znane potrząśnięcie. Wywołaj je, zmieniając key albo wywołując animate z useAnimate.
Dodaj layout i zmień rozmiar lub pozycję zwykłym CSS. Motion mierzy przed i po, a różnicę animuje transformacjami.
Dwa elementy z tym samym layoutId są traktowane jak jeden. Gdy podkreślenie wyrenderuje się pod nową zakładką, płynnie tam przesunie się.
React usuwa elementy natychmiast. Owinięcie ich w AnimatePresence utrzymuje wychodzące dziecko zamontowane, aż jego animacja wyjścia się skończy.
Tło i panel pojawiają się razem; panel dodatkowo się unosi. Prawdziwą semantykę okna dialogowego (role, fokus, Escape) zachowaj we własnym kodzie.
Motion potrafi animować do height: "auto", czego zwykłe przejścia CSS nie potrafią. overflow hidden zapobiega wylewaniu się tekstu podczas otwierania.
layout na każdym toaście pozwala pozostałym płynnie przesunąć się w górę, gdy jeden znika. popLayout sprawia, że wychodzący toast od razu przestaje zajmować miejsce.
mode="wait" pozwala starej stronie dokończyć wyjście, zanim wejdzie nowa. key musi zmieniać się razem z trasą.
useScroll daje scrollYProgress od 0 do 1. Przekaż container, aby śledzić przewijane pole zamiast okna, i skaluj nim pasek.
useTransform mapuje jedną wartość motion na inny zakres, więc warstwa może poruszać się z inną prędkością niż przewijanie.
animate() może sterować wartością motion. useTransform ją zaokrągla, a renderowanie wartości motion bezpośrednio pozwala uniknąć renderu Reacta w każdej klatce.
pathLength biegnie od 0 do 1 na dowolnym path, circle lub line, co jest najszybszym sposobem na narysowanie ptaszka albo podpisu.
repeat: Infinity z liniowym easingiem daje równomierny obrót. Połącz go z widocznym tekstem lub tekstem dla czytników ekranu, który mówi, co się ładuje.
useAnimate zwraca ref zakresu i funkcję animate. Czekanie (await) na każde wywołanie uruchamia kroki po kolei, a stagger rozkłada jeden krok na wiele elementów.
Stiffness określa, jak mocno ciągnie sprężyna, a damping, jak szybko się uspokaja. Niski damping przestrzeliwuje i drga.
MotionConfig reducedMotion="user" wyłącza animacje transformacji i layoutu u osób, które poprosiły system o mniej ruchu, zachowując zanikanie.
Plik template.tsx montuje się ponownie przy każdej nawigacji, w przeciwieństwie do layout.tsx, więc jego przejście od initial do animate uruchamia się przy każdej zmianie strony. Potrzebuje "use client", bo korzysta z motion.
Komponent m razem z LazyMotion ładuje tylko wymienione funkcje. domAnimation obejmuje animacje, variants, wyjścia i gesty; domMax dodaje drag i layout.
Wolisz efekt bez JavaScriptu? Wypróbuj
Odtwórz ponownie
Cześć
Karta
Plan
Projekt
Budowa
Start
Przewiń to pole w dół.
Treść sekcji
Naciśnij mnie
Kulka do przeciągania
Karta {n}
{card}: przesuń mnie
Resetuj
Logo
Menu
Sekcja hero
Stopka
Hasło (każda odpowiedź jest tu błędna)
Zaloguj się
Powiększ lub zmniejsz pole
Start
Cennik
Blog
Ukryj
Pokaż
Otwórz modal
Zapisano
Zamknij
Co jest w zestawie?
Hosting, darmowy adres i edytor.
Zapisano szkic {n}
Dodaj toast
Witaj w domu.
O tym studiu.
Przywitaj się.
Akapit {n}. Przewijaj dalej, aby zobaczyć, jak pasek wypełnia się podczas czytania tego pola.
Ładowanie
Jeden
Dwa
Trzy
Odtwórz
Przesuń
Twój system prosi o ograniczony ruch: {answer}. Przy odpowiedzi tak pole poniżej tylko zanika.
Wyrenderowano komponentem m
Zacznij za darmo · Bez karty kredytowej