Mo.js - Ett komplett rörelse grafikbibliotek för webben

Animering på webben är här för att stanna som JavaScript blir bara kraftfullare och webbläsarsupport växer med varje år som passerar.

De flesta animationer vi känner till fokuserar på gränssnittet: rullgardinsmenyer, flikar och bildspel är vanliga exempel.

Men Mo.js är annorlunda. Det här är en JavaScript-biblioteket för anpassad rörelsegrafik för att hjälpa designers skapa fantastiska animerade funktioner som går utöver enkla UI / UX-tricks.

Om du besöker Mo.js hemsida hittar du fullständig dokumentation tillsammans med en bra handledning för nybörjare.

Observera detta biblioteket är ganska svårt att arbeta med. Du bör vara bekant med grundläggande frontendkodning innan du tinkar med Mo.js på egen hand. Det finns dock mycket du kan hämta bara genom att studera levande demoer och gräva i någon av källkoden.

Ta en titt på GitHubs största repo om du vill se några demos i aktion.

Det finns en hel lista med länkar från CodePen alla med live Mo.js-demos. Dessa inkluderar fullscreen sida animation laddare, klicka för att animera mikrointeraktioner, och massor av formmanipulationer.

Till exempel skapar den här penna en ganska galen mikrointeraktion från användarinmatning (klicka bara någonstans inuti penna för att se den).

Några av dessa pennor kan kännas överst, men det här är inte bara JS-animationer. De är verkligen som konstverk.

Dessa demonstrationer bevisar precis hur långt vi har kommit med animering på webben. Det faktum att någon kan skapa dessa effekter med enbart frontendkod är helt enkelt otrolig.

Om du vill se mer från Mo.js ta en titt på demoserna på GitHub. Du kanske också gillar den här handledningen om hur du arbetar med Mo.js-biblioteket steg för steg.

Hur som helst är det här en av mina favorit animationsbibliotek hittills. Det erbjuder så mycket kontroll att du bara inte kan hitta någon annanstans. Och det bidrar till att föra mikrointeraktioner från mobilappar till webbdesign.