75 Web Animation Tools Du måste försöka
Animering är en av de trender som har sina klor i webgränssnitt. Dess popularitet fluktuerar, men det är alltid där någonstans, som en viktig komponent på någon webbplats.
Från små, knappt synliga, laddningsspinnare, till hela sidövergångar som en filmupplevelse, animering når in i alla områden av våra mönster.
För designers som vill integrera animering finns det en mängd alternativ. Från rent dekorativa övergångar som bara prettify gränssnittet, till meningsfulla effekter som förbättrar användarupplevelser, täcker vår samling verktyg som låter dig skapa animeringar av olika skalor och till olika ändamål. Här är 75 plugins och bibliotek som du vill kolla in. du kommer inte använda dem alla varje gång, men alla har ett idealiskt användarfall, och några du kommer att använda om och om igen ...
1. Animate.css
Animate.css är ett grundläggande bibliotek med snygga webbläsaranimeringar som ligger till grund för många lösningar. Från klassiska studsar och fadingar till moderna vändningar och unika effekter kan det möta behoven hos nästan alla projekt.
2. Magic Animationer
Magic Animationer fokuserar på exceptionella effekter som ger ett gränssnitt en viss zest. Även om biblioteket inte kan prata med en enorm mångfald, räcker det med att berika användarupplevelsen.
3. Bounce.js
Bounce.js är en liten lekplats där du kan göra experiment med CSS-baserade animeringar. Lägg bara till en komponent och ställa in inställningarna för att få allt att leva. Och i slutet exporterar du css-filen.
4. AnijS
AnijS hjälper till att hantera animering på ett intuitivt sätt genom att använda enkla instruktioner som Om, På, Gör, Till. Det stora är att du är välkommen att använda dina egna klasser eller till och med Animate.css (nämnd tidigare) för att skapa något fantastiskt.
5. Snabbt.js
Snabbt.js är känd för sin minimala inställning som ger snabba animeringar. Den väger bara 5kb; Det är dock möjligt att ge någon komponent en synlig förstärkning genom att översätta, rotera, skeva, skala eller ändra storlek på dess form.
6. Kute.js
Kute.js är en sterling animationsmotor som ger utmärkt prestanda. Det är snabbt och kompatibelt över olika webbläsare tack vare en uppsättning lönsamma fallbacks som hanterar äldre webbläsare. Den levereras med många plugins för att ge en effektiv arbetsmiljö.
7. Velocity.js
Velocity.js är en animationsmotor som vid första anblicken kan se representativ. Men arsenalen innehåller alla vanliga typer av animeringar som morphing, loop, easing, scrolling etc. Det är snabbt och jQuery-oberoende.
8. Lazy Line Painter
SVG-bananimationer görs enkelt med Lazy Line Painter . Ta ditt linjebilder från Illustrator i SVG-format och ladda upp det till omvandlaren. Den senare kommer att skapa en jQuery-fil som hanterar animeringsprocessen. Om det är nödvändigt kan du göra ändringar direkt inuti koden.
9. SVG.js
SVG.js erbjuder dig en intuitiv miljö där du kan manipulera och animera SVG. Den är liten och oberoende med ren syntax och enhetlig API. Gör vad du vill: animera storlek, färg, position, textvägar; transformera komponenter; binda händelser etc.
10. Motion UI
Till skillnad från tidigare exempel, Motion UI tar fördelen av SASS att skapa spännande CSS-animationer. Det finns en hel rad fördefinierade övergångar och effekter som kan tillämpas på någon HTML-komponent. Allt fungerar i alla populära webbläsare förutom IE9.
11. Vänta! Animera
Vänta! Animera låter dig använda förseningar och väntar i animeringar på ett enkelt sätt. Beräkna alla nödvändiga tidsintervaller genom den lilla panelen och bygg en naturlig animering utan liv och rörelse.
12. Dynamics.js
Dynamics.js är ett JavaScript-drivet bibliotek som erbjuder 9 standard effekter att spela med. Du kan ange varaktighet, frekvens, friktion, förväntansstorlek och förväntningsstyrka för att uppnå fysikbaserade animeringar i verkligheten.
13. Koreograf.js
Med Choreographer.js vid dina fingertoppar bör du inte vara rädd för komplexa animationer, eftersom det här JavaScript-biblioteket gör allt tungt. Även om det handlar om ett begränsat antal animationer, så låter det dig arbeta med egna funktioner så att du kan skapa egna mästerverk.
14. Anime.js
Kommer med en imponerande uppsättning funktioner som gör det möjligt att kedja flera animeringar, synkronisera olika instanser, ritningslinjer, morphing objekt, bygga individuella animeringar etc, detta JavaScript-animeringsmotor kommer att överraska dig med sin potential.
15. Mo.js
Mo.js står för rörelse för webben. Det är otroligt snabbt och samtidigt intuitivt och enkelt. Skapa intressanta spår, oväntade dialogmodala övergångar, bubbla layouter, sprängande animationer och mycket mer.
16. Sequence.js
Sequence.js är en CSS-driven ram för att bygga responsiva touch-aktiverade stegbaserade animeringar. Det är idealiskt för att skapa skjutreglage, presentationer, banners och andra typer av dynamiska komponenter. Bland de många premieplanerna hittar du en gratis som ger dig en personlig öppen källkodslicens.
17. Shifty
Lömsk är en tweening-motor med starkt fokus på optimering, snabb prestanda, flexibilitet och töjbarhet. Det anses vara ett lönsamt alternativ till GreenSock men med ett mycket enklare gränssnitt.
18. Det är tisdag
tisdag är ett fristående animationsbibliotek som kan användas i samverkan med andra bibliotek. Det gör ingångarna och utgångarna snygga, subtila och eleganta. Det erbjuder en mängd olika standard effekter som försvinnningar, utökningar, inkrypningar, drop-ins, etc.
19. CSS Animera
CSS animera är en primitiv lekplats som genererar en giltig och skräpfri kod för någon vanlig animering. Ange namn, klass, animeringsegenskaper, ramegenskaper; manipulera tidslinjen och lägg till markörer: justera i ett ord allt du behöver för att skapa en vanlig nyckelramsbaserad animering.
20. Vivus.js
Frakt med tre typer av animeringar: försenar, synkroniserar och avslöjar en efter en, Vivus.js kommer att dra en SVG på ett jämnt och naturligt sätt vilket gör att komponenten blir en underbar upplevelse. Du kan gå för fördefinierade animeringar eller använda egna anpassade funktioner.
21. Bonsai.js
Bonsai.js är ett JavaScript-bibliotek för avancerade grafikmanipulationer. Den har en ganska enkel API och SVG renderer. Använd sin online-redaktör för att ge en provkörning, bekanta dig med syntaxen och ladda ner några exempel för att komma igång med.
22. GSAP av GreenSock
GSAP är en kraftfull animationsplattform som riktar sig till professionella animeringar. Det har många plugins och verktyg som är ansvariga för olika typer av animeringar. Den består av BezierPlugin, CSSPlugin, DrawSVGPlugin, MorphSVGPlugin, Physics2DPlugin, TweenLite, etc.
23. Popmotion
Popmotion är ett annat lätt och praktiskt alternativ till Greensock i vår samling. Det är en rörelsemotor med full kontroll över varje ram. Den har en avancerad tween, färgblandning och en massa funktioner och åtgärder för att bygga komplexa lösningar.
24. Tween.js
Många otroliga saker görs med hjälp av Tween.js . Det är en avancerad tweening-motor med många parametrar för att få animationen under kontroll. Det är också en utmärkt lösning för att förbättra projekt som drivs av Three.js.
25. Hover.css
Hover.css "Biblioteket kan brytas upp i flera grundläggande kategorier: 2D-övergångar, bakgrundsövergångar, ikonanimationer, gränssövergångar, skugg- och glödövergångar, talbubblor och lockar. Applicera dessa effekter på något element i din design utan begränsningar.
26. Transit
Listan över funktioner i Genomresa är ganska kort men det innehåller de viktigaste sakerna för att bygga 2D och 3D-transformationer. Du kan till exempel ange förseningar och varaktigheter, lägga till lättnadsfunktion, använda relativa värden och mer.
27. Raket
Raket är en lösning för att fördjupa ett objekts rörelse från en punkt till en annan. Det finns 8 special effekter som pulsation eller rotation som ger denna resa en härlig zest .
28. Animo.js
Animo.js är ett relativt litet verktyg för att ta hand om övergångar och animeringar. Den har en uppsättning extra plugins som nedräkning, rotera och animera som berikar biblioteket och gör det mycket lättare att uppnå önskad effekt.
29. Shift.css
Shift.css är en ram för att bygga animeringar i en behållare som påverkar både kapslade och adaptiva element. Det finns 15 typer av standard animeringar, inklusive flyttning, inmatning, exiting, dropping och några andra.
30. CSShake
CSShake kommer med 11 klasser som tvingar elementen i din DOM att skaka. Du kan välja riktning (horisontal eller vertikal), typ (fast, galen, konstant, bit), intensitet (långsam eller hård) eller bara gå till ett standardalternativ.
31. Saffron
Om du föredrar att använda mixins för att enkelt och snabbt kunna manipulera animeringar och övergångar då Saffran är säkert för dig. Det är en sammanställning av återanvändbara metoder som skrivs i Sass där du kan ställa in variabler och parametrar.
32. CSSynth
CSSynth är en liten redaktör där du kan njuta av den snygga synkroniseringen. Animeringen baseras på en rad fyrkanter som du kan ange på den vänstra panelen. Välj en effekt, sätt fördröjning och välj om du vill hämta resultatkoden i CSS eller SCSS-format.
33. Ceaser
ceaser är ett gammalt, beprövat verktyg för att genomföra experiment med den klassiska lättnaderna. Det finns ett antal varianter som börjar från linjära och slutar med den anpassade. Två extra parametrar (varaktighet och effekt) hjälper till att göra resultatet perfekt.
34. Morf.js
För att ta ovanstående verktyg lite längre kan du prova Morf.js . Det erbjuder övergångar baserat på anpassade lättnader. Det finns nästan 40 fördefinierade alternativ som du snabbt kan anpassa till ditt projekt.
35. Voxel.css
Voxel.css skapades speciellt för 3D-renderingar. Den enkla implementeringen möjliggör även att nybörjare kan förstå 3D CSS. Biblioteket har 4 viktiga klasser: Scene, Värld, Redaktör och Voxel som hjälper till att bygga spel och njuta av åtgärden.
36. Repaintless.css
Repaintless.css använder FLIP teknik för att göra animering snabb och jämn. Även om det kräver några förbättringar. Ändå är det en perfekt start för dem som ägnar särskild uppmärksamhet åt prestanda.
37. MixItUp
Blanda det är ett bibliotek för att försköna filtrering, sortering, infogning och andra standardåtgärder som är förknippade med flertalet gränssnitt såsom portföljer, gallerier etc. Det är ett beroendefri och lovar att ge en hög prestanda.
38. Wallop
Som titeln säger, Dänga är för att visa och gömma saker på ett trevligt sätt; förutsägbart, dess allmänt bruk ligger i att bygga reglage. Ingen hindrar dig från att utnyttja sin potential och skapa något intressant och spännande.
39. Ramjet
ramjet omvandlar ett element till ett annat med illusionen av rörelse som realiseras genom att lätta funktionen. Den kan arbeta med DOM-element, SVG, statiska bilder eller animerade bilder.
40. jQuery DrawSVG
Baserat på en kraftfull jQuery-animationsmotor drar det effektivt alla vägar inuti SVG, vilket ger bilden en dramatisk och samtidigt elegant ingång. Förfarandet är enkelt: lägg till plugin till sidan, initiera den och köra animeringen.
41. Animatic.js
Animatic.js är en bra cross-browser lösning med integrerade fysik regler som använder CSS transformationer, 3D-omvandlingar och JavaScript för att få allt till liv. Dess huvuduppgift är att minska dina ansträngningar för att animera ett flertal objekt samtidigt. Du kan bygga både parallella och sekventiella animeringar med noggrann inställning av varaktighet, fördröjning och lättnad.
42. Move.js
Move.js är ett överdimensionerat verktyg för att skapa regelbundna animeringar som skalning, skevning, flyttning eller översättning. Varje animering kan förbättras med den klassiska lättfunktionen.
43. Eg.js
Eg.js är en noggrant samlad samling av olika effekter och dynamiska element som syftar till att förbättra interaktioner i gränssnitten. Det finns 8 kraftfulla komponenter som sorterar ut grundläggande uppgifter och 6 huvudmetoder och händelser för andra ändamål.
44. GFX
GFX är ett övertygande 3D-animationsbibliotek för att bygga CSS3-animationer på ett programmerat sätt. Det fungerar med jQuery vilket gör det mycket lättare att producera önskat resultat. Du kan leka med skalering, rotering, översättning, skevning och några andra saker.
45. Stylie
Även om det sägs att stylie är ett verktyg för roligt, men det kommer säkert att imponera på dig med sina möjligheter. Kontrollcentret har 4 flikar som låter dig ställa in nyckelbilder, lättnader, exportalternativ och HTML, vilket gör komplexa animationer enkelt.
46. Iconate.js
Iconate.js injicerar livet i ikonernas transformationer, vilket förbättrar en övergång mellan två objekt med en trevlig följdseffekt. Det fungerar bra inte bara med Font Awesome, men också med glyficoner och till och med din egen anpassade uppsättning piktogram.
47. AnimateMate
AnimateMate är ett litet verktyg för att producera och exportera småskaliga animeringar från din Sketch-miljö. Det är inte något fint, men det låter dig spela med nyckelbilder, lägga till lättnader, kontrollsekvenser och lite mer.
48. CAAT
CAAT (som står för Canvas Advanced Animation Toolkit) är en sterling ram som bildar en kraftfull tandem med JavaScript. Dess verktygssats innehåller scener, multi render-tekniker, klippmaskor, standardpaket med beteenden etc.
49. Granim.js
Granim.js är ett litet JavaScript-bibliotek för spicing upp gränssnitt med interaktiva gradientbaserade centerpieces. Det kan vara en standard radiell gradientanimering, dynamiska gradienter applicerade ovanför bildens bakgrund, eller rörliga gradienter kombinerat med bildmaskar.
50. Animista
Skapat av Ana Travas, Animista är en lekplats för att utföra experiment med en massa konventionella och ovanliga fördefinierade CSS-driven animeringar. Välj varaktighet, tidsfunktion, fördröjning, iterationsräkning och några andra alternativ för att undersöka resultatet.
51. Obnoxious.css
Obnoxious.css levereras med 5 unika CSS-baserade animeringar som tvingar gränssnittets element att skaka, vrida, förstora, imitera strobeffekten eller ändra typsnittets vikt. Allt du behöver göra är att använda den föredragna klassen till önskad div.
52. Animatelo
Animatelo innehåller ett ton av iögonfallande dynamiska effekter som lånades från den berömda och kraftfulla Animate.css, vilket ger ett enklare sätt att tillämpa dem. Tack vare Web Animations API-polyfil stöds det av alla moderna webbläsare.
53. Foxhållare
Foxholder är ett paket med 15 fina små effekter som skapades speciellt för att förbättra användarens interaktioner med formuläret. Varje metod spänner in inmatningsfältet på eget sätt: det kan göra gränsen ljusare, lägga till visuella ledtrådar, lägga in text och mycket mer.
54. Rhythm.js
Rhythm.js handlar om lekfulla disco-inspirerade små animeringar. Detta JavaScript-bibliotek innehåller effekter som efterliknar någon form av dansförlopp. Det finns nästan 20 alternativ som kommer att lägga till boogie-woogie på din webbplats.
55. Colorido.js
Liksom Granim.js, det här JavaScript-pluginprogrammet skapades för att manipulera färgegenskapen. Det bidrar till att dynamiskt ändra toner och opacitet hos bakgrunden och texten, samt skapa icke-statiska radiella, linjära, diagonala och horisontella gradienter.
56. Barba.js
Barba.js utnyttjar PJAX (en ajaxbaserad teknik) för att lindra användare av så kallad hård uppdatering som växlar mellan sidorna. Det gömmer bara den gamla behållaren och visar den nya behållaren på ett subtilt ögonvänligt sätt.
57. ScrollReveal.js
ScrollReveal.js är ett populärt verktyg för att skapa rullningsanimationer. Med sin huvudsakliga reveal () -metod kan du hantera olika animeringar och kontrollera alla sina standardaspekter. Det bästa är att det fungerar bra både med webbläsare och mobila webbläsare.
58. Scrollanim
Scrollanim är mindre sofistikerat men ännu snabbare och enklare verktyg att använda än i föregående exempel. Även om det gynnar CSS3 men det tillåter dig att lägga till animeringar med hjälp av JavaScript API för att producera rullningsaktiverade animeringar. Det har ett antal förbyggda lösningar som du snabbt kan presentera för ditt projekt.
59. ScrollTrigger
Medan de tidigare två lösningarna huvudsakligen koncentrerar sig på traditionell vertikal rullning, den här är för att bygga långa horisontella webbplatser. Den låter dig bygga dynamiska gränssnitt i x-axelplanet befolkade med vackra CSS3-animeringar med en ganska primitiv syntax.
60. Force.js
Force.js är en liten lösning som är berövad av stor funktionalitet och rikedom av alternativ. Det är emellertid idealiskt för vanliga uppgifter som att ställa in objekt i subtil rörelse eller prettifying rullning. Som vanligt ligger lättnad i sin kärna vilket gör animeringen ren och snygg.
61. AOS
AOS står för animera på rullning. Det gör vad det står - ger dig en massa livliga fördefinierade effekter som utlöses av en rullningshändelse. Om du vill ge sektioner en dramatisk ingång utan att djupt gräva i kod är det säkert för dig.
62. Rellax
Rellax är för vacker parallax. Det är ett lätt vanilj JavaScript-bibliotek för att ge en subtil touch av 3D-dimension till gränssnitt.
63. Tilt.js
Tilt.js producerar spännande parallax-driven tilt effekt. Det kommer att flytta objekten i ett sluttande läge som imiterar 3D i ett grundläggande 2D-plan. Du kan fixa en axel vilket gör effekten mer lockande och intressant, eller återskapa någon form av bländning eller flytande känsla.
64. Transformera-när
Trans-när är en bra lösning för att utforma berättande upplevelser med hög prestanda och inbyggt stöd för mobila enheter. Det satsar på två viktiga parametrar: tid och rulla position och därmed göra användarens äventyr genom gränssnittet vigilantly kontrolleras av din sida. Det fungerar med både SVG och vanliga HTML-element.
65. CSS3 Animation
Detta är en gammal skol generator med en live förhandsgranskning för att skapa grundläggande CSS3 animeringar. Det finns ett standard kontrollcenter där du kan justera övergångens varaktighet, antal iterationer, tidsfunktioner etc. Rutinen är enkel: sätt upp allt, kopiera de resulterande HTML- och CSS-koderna och klistra in dem i ditt projekt.
66. Curve.js
Curve.js andas livet i linjer som gör dem "dansa" och snurrar precis som en våg. Använd den för att skapa abstrakta eleganta geometriska inspirerade bakgrunder eller mittpunkter.
67. Animator.js
Animator.js sägs vara flexibel, effektiv och lätt. Det erbjuder det enklaste sättet att hantera keyframes och generera CSS animeringar av olika skalor. Det är också beroendefri.
68. Cel-animering
Cel-animering är en Sass mixin som ger dig kontroll över de traditionella nyckelramarna. Du kan aktivera SVG eller någon typ av HTML-element.
69. Scrollissimo
Scrollismo skapades för att arbeta i partnerskap med Greensock skickligt och smidigt animerade objekt på användarens rullning. Med ett extra tillhörande JavaScript-plugin för pekskärmsprylar täcker det många enheter.
70. jqClouds
jqClouds är ett primitivt plugin som genererar och fyller en design med rörliga moln som svävar över gränssnittet. Du kan ändra konceptet, ersätta moln med något annat objekt, för att ge ett statiskt gränssnitt en viss dynamisk smak.
71. Färganimering
Som ni gissat, detta verktyg är för att animera ton och transparens av bakgrund, kant eller text. Egentligen fungerar det med färg på något objekt som har det som en egenskap.
72. Flubber
Att utesluta plötsliga hopp och drastisk metamorfos som kan uppstå när ett objekt omvandlas till en annan som du kan använda Flubber . Pluggen ger smidiga interpoleringar mellan de två formerna. Den enda nackdelen är att den bara fungerar med 2D-grafik.
73. Partiklar.js
Om du är upp till lekfull partikel animation-ett populärt val idag kan du använda den här praktiska generatorn . Den är baserad på lönsamt JavaScript-bibliotek som gör allt arbete. Ange inställningar som färg, nummer, form, storlek, opacitet etc. och exportera enkelt resultatet.
74. 3D-animering med Three.js
Detta är ett litet manus som inte har alla förmågor hos ovan nämnda plugins. Ändå lägger det till ditt gränssnitt en vacker animerad bakgrund fylld med partikelanimering. Du kan konfigurera färg, linjer, opacitet och några andra alternativ för att göra det blandat i din miljö.
75. Three.js
Sist men inte minst, Three.js - Ett kraftfullt och mångsidigt bibliotek som står bakom många imponerande webbplatser. Det passar både enkla och komplexa projekt. Det låter dig arbeta med
