25 Framer Motion (Motion for React) voorbeelden die live draaien: fades, stagger, layout, shared elements, modals, accordions, drag, scrollvoortgang, paginaovergangen en reduced motion.
Framer Motion, nu gepubliceerd als Motion for React, animeert elk element dat u vervangt door een motion-component: stel de props initial, animate en transition in. De 25 recepten hieronder draaien live op deze pagina, elk met kopieerbare code: entrances, stagger, drag, layout en shared elements, exit-animaties, scrollvoortgang, paginaovergangen en reduced motion.
Installeren
Elke demo hier is de code ernaast, draaiend in uw browser. De recepten gebruiken het motion-package; gebruikt uw project nog framer-motion, dan zijn de componenten en props hetzelfde en verschilt alleen het importpad.
Ja. De bibliotheek is hernoemd naar Motion en het React-deel wordt geïmporteerd uit motion/react. Het framer-motion-package wordt nog steeds gepubliceerd met dezelfde API, dus oudere tutorials blijven werken.
Het element moet een direct child van AnimatePresence zijn, een unieke key hebben en een exit-prop hebben. Wordt de parent van AnimatePresence ook verwijderd, dan blijft er niets over om te animeren.
Animeer height van 0 naar "auto" op een motion-element en zet overflow op hidden. Motion meet de echte hoogte voor u, wat CSS-transitions niet kunnen.
Motion-componenten gebruiken browser-API's, dus het bestand dat ze rendert heeft "use client" nodig. Een server component kan dat client component nog steeds renderen en er children aan doorgeven.
Niet als u bij transforms en opacity blijft, die zonder nieuwe layout draaien. Grote layoutanimaties en veel gelijktijdige elementen kosten meer; test op een middenklasse telefoon en gebruik LazyMotion om de bundle te verkleinen.
Props en hooks die op deze pagina worden gebruikt
initial is het eerste frame, animate is waar het eindigt. Meer is niet nodig voor een eenmalige entrance.
Bewegen met y gebruikt een CSS-transform, dus het element duwt zijn buren nooit weg terwijl het beweegt.
Variants zijn benoemde toestanden. De parent geeft zijn toestand door en staggerChildren vertraagt elk child net iets meer dan het vorige.
whileInView start de animatie wanneer het element de viewport binnenkomt; once: true voorkomt dat hij bij elke scroll opnieuw afspeelt.
Een array is een lijst keyframes. times verdeelt ze over de duur, van 0 tot 1.
whileHover en whileTap animeren naar een toestand zolang het gebaar duurt en keren daarna vanzelf terug.
dragConstraints kan een ref naar een parent-element krijgen, zodat het item er nooit buiten gesleept kan worden.
Sleep op één as en lees dan in onDragEnd de offset en snelheid uit om te bepalen of de kaart verdwijnt of terugveert.
Reorder.Group houdt de array in state en geeft u de nieuwe volgorde. Elk Reorder.Item heeft de waarde nodig waar het voor staat.
x door een paar keyframes animeren geeft de bekende schudbeweging. Start hem door een key te wijzigen of animate aan te roepen uit useAnimate.
Voeg layout toe en wijzig grootte of positie met gewone CSS. Motion meet voor en na en animeert het verschil met transforms.
Twee elementen met dezelfde layoutId worden als één behandeld. Wanneer de onderstreping onder een nieuwe tab rendert, glijdt hij daarheen.
React verwijdert elementen direct. Door ze in AnimatePresence te wikkelen blijft een vertrekkend child gemount tot zijn exit-animatie klaar is.
Backdrop en paneel faden samen in; het paneel komt ook omhoog. Houd de echte dialoogsemantiek (role, focus, Escape) in uw eigen code.
Motion kan animeren naar height: "auto", wat gewone CSS-transitions niet kunnen. overflow hidden voorkomt dat de tekst eruit loopt tijdens het openen.
layout op elke toast laat de rest soepel omhoog schuiven als er een verdwijnt. popLayout zorgt dat de vertrekkende toast meteen geen ruimte meer inneemt.
mode="wait" laat de oude pagina eerst volledig vertrekken voordat de nieuwe binnenkomt. De key moet met de route veranderen.
useScroll geeft scrollYProgress van 0 tot 1. Geef container mee om een scrollend vak te volgen in plaats van het venster, en schaal de balk ermee.
useTransform zet een motion value om naar een ander bereik, zodat een laag met een andere snelheid kan bewegen dan het scrollen.
animate() kan een motion value aansturen. useTransform rondt hem af, en door de motion value direct te renderen vermijdt u een React-render bij elk frame.
pathLength loopt van 0 tot 1 op elk path, circle of line, en is de snelste manier om een vinkje of handtekening te tekenen.
repeat: Infinity met een lineaire ease geeft een gelijkmatige draaiing. Combineer het met zichtbare of schermlezertekst die zegt wat er laadt.
useAnimate geeft een scope-ref en een animate-functie terug. Door elke aanroep te awaiten lopen de stappen op volgorde, en stagger verdeelt één stap over veel elementen.
Stiffness bepaalt hoe hard de veer trekt, damping hoe snel hij tot rust komt. Lage damping schiet door en wiebelt.
MotionConfig reducedMotion="user" zet transform- en layoutanimaties uit voor mensen die hun systeem om minder beweging vragen, terwijl fades blijven.
Een template.tsx-bestand wordt bij elke navigatie opnieuw gemount, anders dan layout.tsx, dus zijn overgang van initial naar animate draait elke keer dat u van pagina wisselt. Het heeft "use client" nodig omdat het motion gebruikt.
Het m-component plus LazyMotion laadt alleen de features die u opsomt. domAnimation dekt animaties, variants, exit en gebaren; domMax voegt drag en layout toe.
Liever een effect zonder JavaScript? Probeer de
Opnieuw afspelen
Hallo
Kaart
Plannen
Ontwerpen
Bouwen
Lanceren
Scroll dit vak naar beneden.
Inhoud van de sectie
Druk op mij
Versleepbare bal
Kaart {n}
{card}: swipe mij
Resetten
Logo
Menu
Hero
Footer
Wachtwoord (elk antwoord is hier fout)
Inloggen
Laat het vak groeien of krimpen
Home
Prijzen
Blog
Verbergen
Tonen
Modal openen
Opgeslagen
Sluiten
Wat is inbegrepen?
Hosting, een gratis adres en de editor.
Concept {n} opgeslagen
Toast toevoegen
Welkom thuis.
Over deze studio.
Zeg hallo.
Alinea {n}. Blijf scrollen om de balk te zien vollopen terwijl u door dit vak leest.
Bezig met laden
Een
Twee
Drie
Afspelen
Bewegen
Uw systeem vraagt om minder beweging: {answer}. Bij ja faadt het vak hieronder alleen in.
Gerenderd met het m-component
Gratis beginnen · Geen creditcard nodig