Anime.js - Ett lätt JavaScript-animeringsbibliotek

Webanimering har kommit långt. Inte bara kan utvecklare göra animeringar med hjälp av en kombination av CSS / SVG / JS, men det finns dussintals gratis bibliotek för att spara tid i processen.

En av mina favoriter är Anime.js, en helt fri, öppen källkod JavaScript-animeringsbibliotek.

Detta bibliotek kan gör allt. Dess byggd på JavaScript men det också bygger starkt på CSS-animationer. Du kan rikta in enskilda sidelement via DOM eller du kan till och med rikta in sig anpassade SVGs.

All dokumentation är självhärdad på GitHub, så du kan behöva bläddra för att hitta exakt vad du letar efter. Men varje animeringsfunktion kommer med några parametrar såsom fördröjning, varaktighet och lättnad.

Observera det här biblioteket kommer inte med många standard animationsstilar. Anime.js är gjord för utvecklare som vill anpassa sina animationer utan att skriva verbal kod.

För en levande exempel, kolla in kodpenna nedan. Koden är överlägset enkelt men du får en trovärdig animation med squash och stretch plus förväntan, båda grundarna av animering.

En rättvis varning: biblioteket Anime.js är tät. Det är inte så svårt att skapa en anpassad animering, men du behöver det förstå några grunder som lättnad och vanligt JavaScript-syntax för callbacks & options.

Men all information du behöver är på repo sida, Inklusive massor av kodprover och detaljerade dokumentationstabeller. Och du kan bläddra igenom öppna felrapporter eller kontrollera webbläsarstöd som för närvarande ingår alla större webbläsare och IE 10+.

Det här är enkelt ett av de bästa animationsbiblioteken för webbutvecklare och det ska vara din go-to-lösning för någon komplex webb animation.

För att se en massa levande exempel, kolla in den här samlingen av Anime.js-demos som finns på CodePen. Nedan inbäddade jag min favorit som animerar hela logotypen från början, med verklig livskraft.