75 Web Animasjonsverktøy du må prøve
Animasjon er en av de trender som har sine klør i webgrensesnitt. Dens popularitet svinger, men det er alltid der et sted, som en viktig komponent i et hvilket som helst nettsted.
Fra små, knapt synlige, lastespinnere, til hele sidetransisjoner som en filmopplevelse, animasjon når inn i alle områder av våre design.
For designere som ønsker å innlemme animasjon, finnes det et vell av muligheter. Fra rent dekorative overganger som bare prettify grensesnittene, til meningsfulle effekter som forbedrer brukeropplevelser, dekker vår samling verktøy som lar deg lage animasjoner av forskjellige skalaer og til forskjellige formål. Her er 75 plugins og biblioteker som du vil sjekke ut; Du vil ikke bruke dem alle hver gang, men hver har en ideell brukstilstand, og noen du bruker igjen og igjen ...
1. Animate.css
Animate.css er et grunnleggende bibliotek med ryddige kryssbrowser animasjoner som ligger til grunn for mange løsninger. Fra klassiske bouncings og fadings til moderne vendinger og unike effekter, er det i stand til å møte behovene til nesten ethvert prosjekt.
2. Magic Animasjoner
Magic Animasjoner fokuserer på eksepsjonelle effekter som gir et grensesnitt en spesiell sjanse. Selv om biblioteket ikke kan skryte av et enormt mangfold, er det nok å berike brukeropplevelsen.
3. Bounce.js
Bounce.js er en liten lekeplass hvor du kan utføre eksperimenter med CSS-baserte animasjoner. Bare legg til en komponent og still inn innstillingene for å få alt til å leve. Og til slutt, eksporter css filen.
4. AnijS
AnijS hjelper til med å håndtere animasjon på en intuitiv måte ved å bruke enkle instruksjoner som Hvis, På, Gjør, Til. Den gode tingen er at du er velkommen til å bruke dine egne klasser eller til og med Animate.css (nevnt tidligere) for å lage noe gøy.
5. Snabbt.js
Snabbt.js er kjent for sin minimale tilnærming som gir rask animasjon. Den veier bare 5kb; Det er imidlertid i stand til å gi noen komponenter en synlig boost ved å oversette, rotere, skille, skalere eller endre størrelse på formen.
6. Kute.js
Kute.js er en sterling animasjonsmotor som gir utmerket ytelse. Det er raskt og kompatibelt på tvers av ulike nettlesere takket være et sett med levedyktige fallbacks som håndterer eldre nettlesere. Den leveres med mange plugins for å gi et effektivt arbeidsmiljø.
7. Velocity.js
Velocity.js er en animasjonsmotor som ved første øyekast kan se representativ. Men arsenalet inkluderer alle vanlige typer animasjoner som morphing, loop, easing, scrolling etc. Det er raskt og jQuery-uavhengig.
8. Lazy Line Painter
SVG-bananimasjoner gjøres enkle med Lat linjemaler . Ta linjediagrammet fra Illustrator i SVG-format og last det opp til konverteren. Sistnevnte vil generere en jQuery-fil som håndterer animasjonsprosessen. Hvis det er nødvendig, kan du gjøre endringer rett innenfor koden.
9. SVG.js
SVG.js gir deg et intuitivt miljø der du kan manipulere og animere SVGer. Den er liten og uavhengig med ren syntaks og enhetlig API. Gjør hva du vil: animere størrelse, farge, posisjon, tekstbaner; transformere komponenter; binde hendelser etc.
10. Motion UI
I motsetning til tidligere eksempler, Bevegelsesgrensesnitt tar fordelen av SASS for å skape spennende CSS-animasjoner. Det er en hel rekke forhåndsdefinerte overganger og effekter som kan brukes på en hvilken som helst HTML-komponent. Alt fungerer i alle populære nettlesere bortsett fra IE9.
11. Vent! animere
Vente! animere lar deg bruke forsinkelser og venter i animasjoner på en enkel måte. Beregn alle nødvendige tidsintervaller gjennom det lille panelet og bygg en naturlig animasjon uten kjas og mas.
12. Dynamics.js
Dynamics.js er et JavaScript-drevet bibliotek som tilbyr 9 standard effekter å spille med. Du kan spesifisere varighet, frekvens, friksjon, forventningsstørrelse og forventningsstyrke for å oppnå fysikkbaserte animasjoner i virkeligheten.
13. Koreograf.js
Med Choreographer.js på fingertuppene bør du ikke være redd for komplekse animasjoner, siden dette JavaScript-biblioteket gjør alt tungt løft. Selv om det handler om et begrenset antall animasjoner, så lar det deg jobbe med tilpassede funksjoner slik at du kan lage dine egne mesterverk.
14. Anime.js
Kommer med et imponerende sett med funksjoner som muliggjør kjetting av flere animasjoner, synkronisering av forskjellige forekomster, tegningslinjer, morphing objekter, bygging av individuelle animasjoner etc, dette JavaScript animasjonsmotor vil overraske deg med sitt potensial.
15. Mo.js
Mo.js står for bevegelse for Internett. Det er utrolig raskt og samtidig intuitivt og enkelt. Opprett engasjerende stier, uventede dialogmodaloverganger, bobleoppsett, sprengnings animasjoner og mye mer.
16. Sequence.js
Sequence.js er et CSS-drevet rammeverk for å bygge responsive berøringsaktiverte trinnbaserte animasjoner. Den er ideell for å lage skyveknapper, presentasjoner, bannere og andre typer dynamiske komponenter. Blant de mange premieplanene finner du en gratis en som gir deg en personlig åpen kildekode lisens.
17. Shifty
Shifty er en tweening motor med sterkt fokus på optimalisering, rask ytelse, fleksibilitet og utvidbarhet. Det anses å være et levedyktig alternativ til GreenSock, men med et mye enklere grensesnitt.
18. Det er tirsdag
tirsdag er et frittstående animasjonsbibliotek som kan brukes sammen med andre biblioteker. Det gjør innganger og utganger ser jevne, subtile og elegante ut. Det tilbyr en rekke standard effekter som fade-ins, utvidelser, innkjøp, drop-ins, etc.
19. CSS Animate
CSS Animate er en primitiv lekeplass som genererer en gyldig og rotete kode for enhver vanlig animasjon. Angi navn, klasse, animasjonsegenskaper, rammeegenskaper; manipulere tidslinjen og legg til markører: Juster i ett ord alt du trenger for å lage en vanlig keyframe-basert animasjon.
20. Vivus.js
Frakt med tre typer animasjon: forsinkelse, synkronisering og avslørende en etter en, Vivus.js vil tegne en SVG på en jevn og naturlig måte slik at fremkomsten av komponenten gir en nydelig opplevelse. Du kan gå for forhåndsdefinerte animasjoner eller bruke dine egne tilpassede funksjoner.
21. Bonsai.js
Bonsai.js er et JavaScript-bibliotek for avanserte grafikkmanipulasjoner. Den har en ganske enkel API og SVG renderer. Bruk sin online-editor til å gi en teststasjon, bli kjent med syntaksen og til og med laste ned noen eksempler for å komme i gang med.
22. GSAP av GreenSock
GSAP er en kraftig animasjonsplattform som er rettet mot profesjonelle animasjoner. Den har mange plugins og verktøy som er ansvarlige for ulike typer animasjoner. Den består av BezierPlugin, CSSPlugin, DrawSVGPlugin, MorphSVGPlugin, Physics2DPlugin, TweenLite, etc.
23. Popmotion
Popmotion er et annet lett og praktisk alternativ til Greensock i vår samling. Det er en bevegelsesmotor med full kontroll over hver ramme. Den har en avansert tween, fargemengder og en rekke funksjoner og handlinger for å bygge komplekse løsninger.
24. Tween.js
En rekke utrolige ting er laget ved hjelp av Tween.js . Det er en banebrytende tweening-motor med mange parametere for å få animasjonen under kontroll. Det er også en utmerket løsning for å styrke prosjekter som drives av Three.js.
25. Hover.css
Hover.css 'biblioteket kan brytes inn i flere grunnleggende kategorier: 2D-overganger, bakgrunnsoverganger, ikonanimasjoner, grenseoverganger, skygge- og glødoverganger, talebobler og krøller. Påfør disse effektene på ethvert element i designet uten begrensninger.
26. Transitt
Listen over funksjoner av Gjennomreise er ganske kort, men det inneholder de mest vitale ting for å bygge 2D- og 3D-transformasjoner. For eksempel kan du spesifisere forsinkelser og varigheter, legge til lettelsefunksjon, bruke relative verdier og mer.
27. Raket
Rakett er en løsning for å forjevne en objekts bevegelse fra ett punkt til et annet. Det er 8 spesielle effekter som pulsering eller rotasjon som gir denne reisen en nydelig sjel .
28. Animo.js
Animo.js er et relativt lite verktøy for å få et håndtak på overganger og animasjoner. Den har et sett med ekstra plugins som nedtelling, rotere og animere som beriker biblioteket og gjør det mye lettere å oppnå ønsket effekt.
29. Shift.css
Shift.css er et rammeverk for å bygge animasjoner i en beholder som påvirker både nestede og adaptive elementer. Det er 15 typer standard animasjoner, inkludert flytting, inntasting, spennende, slippe og noen andre.
30. CSShake
CSShake kommer med 11 klasser som tvinger elementene i DOM til å riste. Du kan velge retning (horisontal eller vertikal), type (fast, gal, konstant, bit), intensitet (sakte eller hard) eller bare gå for et standardalternativ.
31. Saffron
Hvis du foretrekker å bruke mixins for å enkelt og raskt manipulere animasjoner og overganger da safran er sikkert for deg. Det er en samling av gjenbrukbare metoder som er skrevet i Sass hvor du kan angi variabler og parametere.
32. CSSynth
CSSynth er en liten editor der du kan nyte den vakre synkroniseringen. Animasjonen er basert på en rekke kvadrater hvor du kan spesifisere på venstre panel. Velg en effekt, sett forsinkelse og velg om du vil laste ned resultatkoden i CSS eller SCSS-format.
33. Ceaser
ceaser er et gammelt, tidsbevisst verktøy for å utføre eksperimenter med den klassiske lettelse animasjonen. Det finnes en rekke varianter som starter fra lineære og slutter med den egendefinerte. To ekstra parametere (varighet og effekt) vil bidra til å perfeksjonere resultatet.
34. Morf.js
For å ta det ovennevnte verktøyet litt lenger, kan du prøve Morf.js . Det tilbyr overganger basert på tilpassede lettelsefunksjoner. Det er nesten 40 forhåndsdefinerte alternativer som du raskt kan tilpasse til prosjektet.
35. Voxel.css
Voxel.css ble laget spesielt for 3D-gjengivelser. Den enkle implementeringen tillater at selv nybegynnere får tak i 3D CSS. Biblioteket har 4 viktige klasser: Scene, Verden, Redaktør og Voxel som hjelper til med å bygge spill og nyte handlingen.
36. Repaintless.css
Repaintless.css bruker FLIP-teknikk for å gjøre animasjonen rask og jevn. Selv om det krever noen forbedringer; Likevel er det en perfekt start for de som betaler spesiell oppmerksomhet til ytelsen.
37. MixItUp
MixItUp er et bibliotek for å forskjøre filtrering, sortering, innføring og andre standardhandlinger som er knyttet til flertallgrensesnittene, som porteføljer, gallerier, etc. Det er en avhengighetsfri og løfter å gi høy ytelse.
38. Wallop
Som tittelen sier, pryle er for å vise og gjemme ting på en hyggelig måte; Forutsigbart, den generelle bruken ligger i å bygge skyveknapper. Ingen hindrer deg i å utnytte sitt potensial og skaper noe interessant og spennende.
39. Ramjet
ramjet forvandler ett element til et annet med illusjonen av bevegelse som realiseres ved hjelp av lette funksjonen. Den kan arbeide med DOM-elementer, SVGer, statiske bilder eller animerte bilder.
40. jQuery DrawSVG
Basert på en kraftig jQuery-animasjonsmotor drar det effektivt alle stier inne i SVG, noe som gir bildet en dramatisk og samtidig elegant inngang. Prosedyren er enkel: legg til pluginet til siden, initialiser den og kjør animasjonen.
41. Animatic.js
Animatic.js er en flott nettleserløsning med integrerte fysikkregler som bruker CSS-transformasjoner, 3D-transformasjoner og JavaScript for å få alt til liv. Hovedoppgaven er å redusere innsatsen for å animere mange objekter samtidig. Du kan bygge både parallelle og sekvensielle animasjoner nøye justere varighet, forsinkelse og lette funksjon.
42. Move.js
Move.js er et forenklet verktøy for å lage vanlige animasjoner som skalering, skeving, flytting eller oversettelse. Hver animasjon kan forbedres med den klassiske, enkle funksjonen.
43. Eg.js
Eg.js er en nøye samlet samling av ulike effekter og dynamiske elementer som er rettet mot å forbedre samspillet i grensesnittene. Det er 8 kraftige komponenter som sorterer ut grunnleggende oppgaver og 6 hovedmetoder og hendelser til andre formål.
44. GFX
GFX er et overbevisende 3D animasjonsbibliotek for å bygge CSS3 animasjoner på en programmatisk måte. Det fungerer med jQuery, noe som gjør det mye lettere å produsere ønsket resultat. Du kan leke med skalering, roterende, oversette, skeving og noen andre ting.
45. Stylie
Selv om det sies det stylie er et verktøy for moro, men det vil sikkert imponere deg med sine evner. Kontrollsenteret har 4 faner som lar deg stille inn nøkkelrammer, lette, eksportere alternativer og HTML, slik at komplekse animasjoner blir enkle.
46. Iconate.js
Iconate.js injiserer livet i ikonernes transformasjoner, og forbedrer en overgang mellom to elementer med en hyggelig medfølgende effekt. Det fungerer bra, ikke bare med Font Awesome, men også med Glyphicons og til og med ditt eget tilpassede sett med piktogrammer.
47. AnimateMate
AnimateMate er et lite verktøy for å produsere og eksportere småskala animasjoner fra Sketch-miljøet. Det er ikke noe fancy, men det lar deg spille med keyframes, legge til lette funksjoner, kontrollsekvenser og litt mer.
48. CAAT
CAAT (som står for Canvas Advanced Animation Toolkit) er et sterling rammeverk som danner en kraftig tandem med JavaScript. Dens verktøysett har scener, multi gjengeteknologi, utklippsmasker, standardpakke med oppførsel etc.
49. Granim.js
Granim.js er et lite JavaScript-bibliotek for å spisse opp grensesnitt med interaktive gradientbaserte senterstykker. Det kan være en standard radiell gradientanimasjon, dynamiske gradienter brukt over bildens bakteppe, eller bevegelige gradienter kombinert med bildemasker.
50. Animista
Laget av Ana Travas, Animista er en lekeplass for å utføre eksperimenter med en haug med konvensjonelle og uvanlige forhåndsdefinerte CSS-drevne animasjoner. Velg varighet, tidsfunksjon, forsinkelse, iterasjonstelling og noen andre alternativer for å undersøke utfallet.
51. Obnoxious.css
Obnoxious.css leveres med 5 unike CSS-baserte animasjoner som tvinger elementene i grensesnittet til å riste, vri, forstørre, etterligne strobeffekten eller endre vekten på skrifttypen. Alt du trenger å gjøre er å bruke den foretrukne klassen til ønsket div.
52. Animatelo
Animatelo inneholder en rekke iøynefallende dynamiske effekter som ble lånt fra den berømte og kraftige Animate.css, og gir en enklere måte å bruke dem på. Takket være Web Animasjons API-polyfil støttes det av alle moderne nettlesere.
53. Foxholder
Foxholder er en pakke med 15 fine små effekter som ble opprettet spesielt for å forbedre brukerens samspill med skjemaet. Hver metode understreker inngangsfeltet på sin egen måte: det kan gjøre grensen klarere, legge til visuelle ledetråder, sette i gang tekst og mye mer.
54. Rhythm.js
Rhythm.js handler om lekne disco-inspirerte små animasjoner. Dette JavaScript-biblioteket inneholder effekter som etterligner en slags dansendringer. Det er nesten 20 alternativer som vil legge til boogie-woogie på nettstedet ditt.
55. Colorido.js
Mye som Granim.js, dette JavaScript-pluginet ble opprettet for å manipulere fargeegenskapen. Det bidrar til å dynamisk endre toner og ugjennomsiktighet i bakgrunnen og teksten, samt skape ikke-statiske radiale, lineære, diagonale og horisontale gradienter.
56. Barba.js
Barba.js utnytter PJAX (en ajax-basert teknikk) for å lindre brukere av såkalt hard oppdatering som skifter mellom sidene. Det gjemmer bare den gamle beholderen og viser den nye beholderen på en subtil øye-behagelig måte.
57. ScrollReveal.js
ScrollReveal.js er et populært verktøy for å lage rulleanimasjoner. Med sin viktigste reveal () -metode kan du administrere forskjellige animasjoner og kontrollere alle sine standardaspekter. Det store er at det fungerer bra med både web- og mobilnettlesere.
58. Scrollanim
Scrollanim er mindre sofistikert, men enda enklere og enklere verktøy å bruke i stedet for det forrige eksempelet. Selv om det favoriserer CSS3, men det tillater deg å legge til animasjoner ved hjelp av JavaScript API for å produsere rulleaktiverte animasjoner. Den har en rekke forhåndsbyggede løsninger som du raskt kan introdusere til prosjektet.
59. ScrollTrigger
Mens de to foregående løsningene hovedsakelig konsentrerer seg om tradisjonell vertikal rulling, denne er for å bygge langt horisontale nettsteder. Den lar deg bygge dynamiske grensesnitt i x-aksen flyet befolket med vakre CSS3 animasjoner ved hjelp av en ganske primitiv syntaks.
60. Force.js
Force.js er en liten løsning som er berøvet stor funksjonalitet og rikdom av alternativer. Imidlertid er den ideell for vanlige oppgaver som å sette objekter i subtil bevegelse eller prettifying rulling. Som vanlig ligger lek i kjernen som gjør animasjonen rent og pent.
61. AOS
AOS står for animasjon på bla. Det gjør hva det står - gir deg en mengde livlige forhåndsdefinerte effekter som utløses av en rullende hendelse. Hvis du vil gi seksjoner en dramatisk inngang uten å dypt grave inn i koden, så er det sikkert for deg.
62. Rellax
Rellax er for vakre parallax. Det er et lett vanilj JavaScript-bibliotek for å gi en subtil touch av 3D-dimensjon til grensesnitt.
63. Tilt.js
Tilt.js produserer spennende parallax-drevet tilt effekt. Det vil flytte objekter i skrånende posisjon imitere 3D i et grunnleggende 2D-plan. Du kan fikse en akse og dermed gjøre effekten mer forlokkende og interessant, eller gjenopprette en slags blending eller flytende følelse.
64. Transform-når
Transform-da er en flott løsning for å designe historiefortellingsopplevelser med høy ytelse og innfødt støtte for mobile enheter. Det satses på to viktige parametere: tid og rulleposisjon og dermed gjøre brukerens eventyr gjennom grensesnittet vigilantly kontrollert av din side. Den fungerer med både SVG og vanlige HTML-elementer.
65. CSS3 Animasjon
Dette er en eldgammel generator med en live forhåndsvisning for å lage grunnleggende CSS3 animasjoner. Det er et standard kontrollsenter hvor du kan justere varigheten av overgangen, antall iterasjoner, timingfunksjoner etc. Rutinen er enkel: sett opp alt, kopier HTML og CSS-kodene som følger, og lim dem inn i prosjektet.
66. Curve.js
Curve.js puster livet i linjer som gjør dem "dans" og spinner akkurat som en bølge. Bruk den til å lage en abstrakt elegant geometrisk-inspirert bakgrunn eller midtpunkt.
67. Animator.js
Animator.js sies å være fleksibel, effektiv og lett. Det gir den enkleste måten å administrere keyframes og generere CSS animasjoner av ulike skalaer. Det er også avhengighetsfri.
68. Cel-animasjon
Cel-animasjon er en Sass mixin som gir deg kontroll over de tradisjonelle keyframes. Du kan sette i gang SVG eller en hvilken som helst type HTML-elementer.
69. Scrollissimo
Scrollismo ble opprettet for å jobbe i samarbeid med Greensock dygtige og jevnt animerende objekter på brukerens rulle. Med et ekstra tilhørende JavaScript-plugin for berøringsskjerm-gadgets, dekker det mange enheter.
70. jqClouds
jqClouds er en primitiv plugin som genererer og befolker et design med bevegelige skyer som svever over grensesnittet. Du kan endre konseptet, erstatte skyer med noe annet objekt, for å gi et statisk grensesnitt en bestemt dynamisk smak.
71. Fargeanimasjon
Som du har gjettet, dette verktøyet er for å animere tone og gjennomsiktighet av bakgrunn, kantlinje eller tekst. Egentlig fungerer det med farge på ethvert objekt som har det som en eiendom.
72. Flubber
For å utelukke plutselige hopp og drastisk metamorfose som kan oppstå når en gjenstand konverterer til en annen du kan bruke Flubber . Pluggen gir jevne interpolasjoner mellom de to figurene. Den eneste ulempen er at den bare fungerer med 2D-grafikk.
73. Partikler.js
Hvis du er opptatt av lekende partikler animasjon - et populært valg i dag - du kan bruke denne hendige generatoren . Den er basert på levedyktig JavaScript-bibliotek som gjør alt arbeidet. Angi preferanser som farge, tall, form, størrelse, ugjennomsiktig etc. og bare eksporter resultatet.
74. 3D-linjers animasjon med Three.js
Dette er et lite skript som ikke har alle mulighetene til de ovennevnte pluginene. Ikke desto mindre, det legger til grensesnittet ditt en vakker animert bakgrunn fylt med partikkel animasjon. Du kan konfigurere farger, linjer, ugjennomtrengelighet og noen andre alternativer for å få det til å blande seg i ditt miljø.
75. Three.js
Sist men ikke minst, Three.js - Et kraftig og allsidig bibliotek som står bak mange imponerende nettsteder. Den passer både for enkle og komplekse prosjekter. Det lar deg jobbe med
