75 Web Animation Tools Du skal prøve
Animation er en af de tendenser, der har sine kløer til webgrænseflader. Dens popularitet svinger, men det er altid der et sted, som en vigtig komponent på ethvert websted.
Fra små, næppe synlige, loading spinners, til hele side overgange som en filmoplevelse, animation når ind i alle områder af vores designs.
For designere, der ønsker at indarbejde animation, er der et væld af muligheder. Fra rent dekorative overgange, der bare prettify grænsefladerne, til meningsfulde effekter, der forbedrer brugeroplevelser, dækker vores samling værktøjer, der giver dig mulighed for at lave animationer af forskellige skalaer og til forskellige formål. Her er 75 plugins og biblioteker, som du vil tjekke ud; du vil ikke bruge dem alle hver gang, men hver har en ideel brugstilstand, og nogle vil du bruge igen og igen ...
1. Animate.css
Animate.css er et grundlæggende bibliotek med pæne cross-browser animationer, der ligger til grund for mange løsninger. Fra klassiske bouncings og fadings til moderne vendinger og unikke effekter er det i stand til at dække behov for næsten ethvert projekt.
2. Magic Animationer
Magic Animationer fokuserer på ekstraordinære effekter, der giver en grænseflade en særlig zest. Selvom biblioteket ikke kan prale af en enorm mangfoldighed, er det nok at berige brugeroplevelsen.
3. Bounce.js
Bounce.js er en lille legeplads, hvor du kan foretage eksperimenter med CSS-baserede animationer. Tilføj blot en komponent og indstil indstillingerne for at bringe alt til live. Og til sidst, eksporter css filen.
4. AnijS
AnijS hjælper med at håndtere animation på en intuitiv måde ved at bruge enkle instruktioner såsom If, On, Do, To. Det store er, at du er velkommen til at bruge dine egne klasser eller endda Animate.css (nævnt tidligere) for at skabe noget fantastisk.
5. Snabbt.js
Snabbt.js er berømt for sin minimale tilgang, der giver hurtige animationer. Det vejer kun 5kb; det er dog i stand til at give nogen komponent en synlig boost ved at oversætte, rotere, skevende, skalere eller ændre størrelsen på dens form.
6. Kute.js
Kute.js er en sterling animationsmotor, der leverer fremragende ydeevne. Det er hurtigt og kompatibelt på tværs af forskellige browsere takket være et sæt levedygtige fallbacks, der håndterer gamle browsere. Den leveres med mange plugins til at give et effektivt arbejdsmiljø.
7. Velocity.js
Velocity.js er en animationsmotor, der ved første øjekast kan se repræsentativt. Men arsenalet indeholder alle de almindelige typer animationer som morphing, loop, easing, scrolling osv. Det er hurtigt og jQuery-uafhængigt.
8. Lazy Line Painter
SVG-path animationer gøres nemt med Lazy Line Painter . Tag dit linjebillede fra Illustrator i SVG-format og upload det til konverteren. Sidstnævnte vil generere en jQuery-fil, der håndterer animationsprocessen. Hvis det er nødvendigt, kan du foretage ændringer lige inden for koden.
9. SVG.js
SVG.js tilbyder dig et intuitivt miljø, hvor du kan manipulere og animere SVG'er. Den er lille og uafhængig med ren syntaks og samlet API. Gør hvad du vil: animere størrelse, farve, position, tekststier; transformere komponenter; binde arrangementer mv.
10. Motion UI
I modsætning til de tidligere eksempler, Motion UI tager fordel af SASS for at skabe spændende CSS animationer. Der er en hel del af foruddefinerede overgange og effekter, som kan anvendes til enhver HTML-komponent. Alt fungerer i alle populære browsere undtagen IE9.
11. Vent! Animér
Vente! Animér lader dig betjene forsinkelser og venter i animationer på en enkel måde. Beregn alle nødvendige tidsintervaller gennem det lille panel og opbygg en naturlig animation uden stress og travlhed.
12. Dynamics.js
Dynamics.js er et JavaScript-drevet bibliotek, der tilbyder 9 standard effekter til at spille med. Du kan angive varighed, frekvens, friktion, forventningsstørrelse og forventningsstyrke for at opnå fysiske baserede animationer i virkeligheden.
13. koreograf.js
Med Choreographer.js lige ved hånden bør du ikke være bange for komplekse animationer, da dette JavaScript-bibliotek gør alt tungt løft. Selv om det handler om en begrænset mængde animationer, så lader det dig arbejde med brugerdefinerede funktioner, så du kan lave dine egne mesterværker.
14. Anime.js
Kommer med et imponerende sæt funktioner, der gør det muligt at kæde flere animationer, synkronisere forskellige forekomster, tegne linjer, formere objekter, bygge individuelle animationer osv. Dette JavaScript animationsmotor vil overraske dig med sit potentiale.
15. Mo.js
Mo.js står for bevægelse til internettet. Det er utrolig hurtigt og samtidig intuitivt og simpelt. Opret spændende stier, uventede dialogmodale overgange, boble layout, spræng animationer og meget mere.
16. Sequence.js
Sequence.js er en CSS-drevet ramme for at opbygge lydhørbare touch-aktiverede trinbaserede animationer. Den er ideel til at skabe skydere, præsentationer, bannere og andre slags dynamiske komponenter. Blandt de mange præmieplaner finder du en gratis, der giver dig en personlig open source-licens.
17. Shifty
Shifty er en tweening motor med et stærkt fokus på optimering, hurtig ydeevne, fleksibilitet og udvidelighed. Det anses for at være et levedygtigt alternativ til GreenSock endnu med en meget enklere grænseflade.
18. Det er tirsdag
tirsdag er et frittstående animationsbibliotek, der kan bruges sammen med andre biblioteker. Det gør indgange og udgange ser glatte, subtile og elegante ud. Det tilbyder en række standard effekter som fade-ins, expand-ins, inkrimpninger, drop-ins osv.
19. CSS Animere
CSS animere er en primitiv legeplads, der genererer en gyldig og rodfri kode for enhver almindelig animation. Indstil navn, klasse, animationsegenskaber, rammeegenskaber; manipulere tidslinje og tilføj markører: Juster i et ord alt hvad du behøver for at producere en almindelig keyframe-baseret animation.
20. Vivus.js
Forsendelse med tre typer animation: forsinkelse, synkronisering og afsløring af en efter en, Vivus.js vil tegne en SVG på en jævn og naturlig måde, hvilket gør fremkomsten af komponenten en dejlig oplevelse. Du kan gå til foruddefinerede animationer eller bruge dine egne brugerdefinerede funktioner.
21. Bonsai.js
Bonsai.js er et JavaScript-bibliotek til avancerede grafikmanipulationer. Det har en ret simpel API og SVG renderer. Brug sin online editor til at give et testdrev, gøre dig bekendt med syntaksen og endda downloade nogle prøver for at komme i gang med.
22. GSAP af GreenSock
GSAP er en kraftfuld animationsplatform, der er rettet mod professionelle animationer. Den har mange plugins og værktøjer, der er ansvarlige for forskellige typer animationer. Den består af BezierPlugin, CSSPlugin, DrawSVGPlugin, MorphSVGPlugin, Physics2DPlugin, TweenLite, etc.
23. Popmotion
Popmotion er et andet let og praktisk alternativ til Greensock i vores kollektion. Det er en bevægelsesmotor med fuld kontrol over hver ramme. Det har en avanceret tween, farveblanding og en flok funktioner og handlinger til bygning af komplekse løsninger.
24. Tween.js
En masse utrolige ting er lavet ved hjælp af Tween.js . Det er en avanceret tweening motor med mange parametre for at få animationen under kontrol. Det er også en glimrende løsning til forbedring af projekter, der drives af Three.js.
25. Hover.css
Hover.css 'Bibliotek kan opdeles i flere grundlæggende kategorier: 2D overgange, baggrundsovergange, ikon animationer, grænseovergange, skygge og glød overgange, talebobler og krøller. Anvend disse effekter på ethvert element i dit design uden begrænsninger.
26. Transit
Listen over funktioner af Transit er temmelig kort, men det indeholder de mest vitale ting til opbygning af 2D- og 3D-transformationer. Du kan f.eks. Angive forsinkelser og varigheder, tilføje lukningsfunktion, bruge relative værdier og mere.
27. Raket
Raket er en løsning til prettifying en objekts bevægelse fra et punkt til et andet. Der er 8 specielle effekter som pulsation eller rotation, der giver denne rejse en dejlig skønhed .
28. Animo.js
Animo.js er et relativt lille redskab til at få et håndtag på overgange og animationer. Den har et sæt ekstra plugins som nedtælling, rotere og animere, der beriger biblioteket og gør det meget lettere at opnå den ønskede effekt.
29. Shift.css
Shift.css er en ramme for at opbygge animationer i en beholder, der påvirker både indlejrede og adaptive elementer. Der er 15 typer standard animationer, herunder flytning, indtastning, spænding, droppe og nogle andre.
30. CSShake
CSShake leveres med 11 klasser, der tvinger elementerne i din DOM til at ryste. Du kan vælge retning (vandret eller lodret), type (fast, skør, konstant, chunk), intensitet (langsom eller hård) eller bare gå til en standardindstilling.
31. Saffron
Hvis du foretrækker at bruge mixins for nemt og hurtigt at manipulere animationer og overgange derefter safran er bestemt for dig. Det er en samling af genanvendelige metoder, der er skrevet i Sass, hvor du kan indstille variabler og parametre.
32. CSSynth
CSSynth er en lille editor, hvor du kan nyde den smukke synkronisering. Animationen er baseret på en række kvadrater, hvor antallet du kan angive på venstre panel. Vælg en effekt, indstil forsinkelse, og vælg, om du vil downloade resultatkoden i CSS eller SCSS-format.
33. Ceaser
ceaser er et gammelt, tidsbevist værktøj til at gennemføre eksperimenter med den klassiske lempelse animation. Der er en række varianter, der starter fra lineære og slutter med den brugerdefinerede. To ekstra parametre (varighed og effekt) hjælper med at perfektere resultatet.
34. Morf.js
At tage ovennævnte værktøj lidt længere, kan du forsøge at Morf.js . Det giver overgange baseret på brugerdefinerede udluftningsfunktioner. Der er næsten 40 foruddefinerede muligheder, som du hurtigt kan tilpasse til dit projekt.
35. Voxel.css
Voxel.css blev skabt specielt til 3D renderinger. Dens enkle implementering gør det muligt for newbies at få fat i 3D CSS. Biblioteket har 4 vigtige klasser: Scene, Verden, Redaktør og Voxel, der hjælper med at bygge spil og nyde handlingen.
36. Repaintless.css
Repaintless.css bruger FLIP teknik til at gøre animationen hurtig og glat. Selv om det kræver nogle forbedringer; Ikke desto mindre er det en perfekt start for dem, der lægger særlig vægt på ydeevne.
37. MixItUp
MixItUp er et bibliotek til forskønning filtrering, sortering, indsættelse og andre standard handlinger iboende for de fleste grænseflader såsom porteføljer, gallerier mv. Det er en afhængighedsfri og løfter at give et højt niveau af ydeevne.
38. Wallop
Som titlen siger, Wallop er til at vise og gemme ting på en behagelig måde; forudsigeligt er dens generelle brug at bygge skydere. Ingen stopper dig fra at udnytte sit potentiale og skabe noget interessant og spændende.
39. Ramjet
Ramjet omdanner et element til et andet med illusionen af bevægelse, som realiseres ved hjælp af lette funktion. Det er i stand til at arbejde med DOM elementer, SVG'er, statiske billeder eller animerede billeder.
40. jQuery DrawSVG
Baseret på en kraftig jQuery animationsmotor trækker det effektivt alle stierne i SVG, hvilket giver billedet en dramatisk og samtidig elegant indgang. Proceduren er enkel: tilføj plugin'et til siden, initialiser den og kør animationen.
41. Animatic.js
Animatic.js er en fantastisk cross-browser løsning med integrerede fysik regler, der anvender CSS transformationer, 3D transformationer og JavaScript for at bringe alt til liv. Dens vigtigste opgave er at mindske din indsats for at animere adskillige genstande på én gang. Du kan bygge både parallelle og sekventielle animationer, der omhyggeligt justerer varighed, forsinkelse og lette funktion.
42. Move.js
Move.js er et oversimplificeret værktøj til oprettelse af regelmæssige animationer som skalering, skeving, flytning eller oversættelse. Hver animation kan forbedres med den klassiske lethedfunktion.
43. Eg.js
Eg.js er en omhyggeligt samlet samling af forskellige effekter og dynamiske elementer, der har til formål at forbedre interaktioner i grænsefladerne. Der er 8 kraftfulde komponenter, der sorterer ud basale opgaver og 6 hovedmetoder og arrangementer til andre formål.
44. GFX
GFX er et overbevisende 3D animation bibliotek til opbygning af CSS3 animationer på en programmatisk måde. Det virker med jQuery, hvilket gør det meget nemmere at producere det ønskede resultat. Du kan legetøj med skalering, roterende, oversættelse, skeving og nogle andre ting.
45. Stylie
Selvom det siges at Stylie er et værktøj til sjov, men det vil helt sikkert imponere dig med dets evner. Kontrolcenteret har 4 faner, der giver dig mulighed for at indstille keyframes, lette, eksportere muligheder og HTML, hvilket gør komplekse animationer let-fede.
46. Iconate.js
Iconate.js injicerer livet i ikonernes transformationer, hvilket forbedrer en overgang mellem to elementer med en behagelig ledsagende effekt. Det fungerer godt, ikke kun med Font Awesome, men også med Glyphicons og endda dit eget brugerdefinerede sæt piktogrammer.
47. AnimateMate
AnimateMate er et lille værktøj til produktion og eksport af småskala animationer fra dit Sketch-miljø. Det er ikke noget fancy, men det giver dig mulighed for at spille med keyframes, tilføje lempelse funktioner, kontrol sekvenser og nogle flere.
48. CAAT
CAAT (som står for Canvas Advanced Animation Toolkit) er en sterling ramme, der danner en kraftig tandem med JavaScript. Dets værktøjssæt indeholder scener, multi render teknologier, clipping masker, standard pakke af adfærd mv.
49. Granim.js
Granim.js er et lille JavaScript-bibliotek til spicing op grænseflader med interaktive gradient-baserede centerpieces. Det kan være en standard radial gradient animation, dynamiske gradienter anvendt over billedets baggrund eller bevægelige gradienter kombineret med billedmasker.
50. Animista
Oprettet af Ana Travas, Animista er en legeplads til at udføre eksperimenter med en flok konventionelle og usædvanlige foruddefinerede CSS-drevne animationer. Vælg varighed, timing funktion, forsinkelse, iteration tæller og nogle andre muligheder for at undersøge udfaldet.
51. Obnoxious.css
Obnoxious.css leveres med 5 unikke CSS-baserede animationer, der tvinger elementerne i grænsefladen til at ryste, vride, forstørre, efterligne strobe-effekten eller ændre skriftets vægt. Alt du skal gøre er at anvende den foretrukne klasse til den ønskede div.
52. Animatelo
Animatelo indeholder et ton af iøjnefaldende dynamiske effekter, der blev lånt fra den berømte og kraftfulde Animate.css, hvilket giver en nemmere måde at anvende dem på. Takket være Web Animations API-polyfill understøttes det af alle moderne browsere.
53. Foxholder
Foxholder er en pakke med 15 flotte små effekter, der blev skabt specielt til forbedring af brugerens interaktioner med formularen. Hver metode understreger inputfeltet på sin egen måde: det kan gøre grænsen lysere, tilføje visuelle spor, sætte i bevægelse tekst og meget mere.
54. Rhythm.js
Rhythm.js handler om legende disco-inspirerede små animationer. Dette JavaScript-bibliotek indeholder effekter, som efterligner en slags dansbevægelser. Der er næsten 20 muligheder, der vil tilføje boogie-woogie til dit websted.
55. Colorido.js
Meget som Granim.js, dette JavaScript-drevne plugin blev oprettet for at manipulere farveegenskaben. Det hjælper til dynamisk at ændre toner og opacitet af baggrunden og teksten, samt skabe ikke-statiske radiale, lineære, diagonale og vandrette gradienter.
56. Barba.js
Barba.js udnytter PJAX (en ajax-baseret teknik) for at lette brugerne af såkaldt hård opdatering skifte mellem siderne. Det gemmer bare den gamle beholder og viser den nye beholder på en subtil, øjenåbentlig måde.
57. ScrollReveal.js
ScrollReveal.js er et populært værktøj til at skabe scroll animationer. Med sin vigtigste reveal () metode kan du styre forskellige animationer og styre alle deres standardaspekter. Det store er, at det fungerer godt med både web- og mobilbrowsere.
58. Scrollanim
Scrollanim er mindre sofistikeret endnu mere praktisk og enklere værktøj til brug end i det foregående eksempel. Selvom det favoriserer CSS3, men det giver dig mulighed for at tilføje animationer ved hjælp af JavaScript API til at producere rulleaktiverede animationer. Det har en række forudbyggede løsninger, som du hurtigt kan introducere til dit projekt.
59. ScrollTrigger
Mens de to foregående løsninger primært koncentrerer sig om traditionel vertikal rullning, denne er til opbygning af lange vandrette hjemmesider. Det giver dig mulighed for at opbygge dynamiske grænseflader i x-akse-planet, der er populeret med smukke CSS3-animationer ved hjælp af en ret primitiv syntaks.
60. Force.js
Force.js er en lille løsning, der er berøvet stor funktionalitet og rigdom af muligheder. Det er dog ideelt til regelmæssige opgaver, som f.eks. Indstilling af objekter til subtile bevægelser eller prettifying scrolling. Som sædvanlig ligger lempelse i kernen, der gør animationen ren og pæn.
61. AOS
AOS står for animere på scroll. Det gør hvad det siger - giver dig en masse livlige foruddefinerede effekter, der udløses af en rullende begivenhed. Hvis du vil give sektioner en dramatisk indgang uden dybt grave i kode så er det helt sikkert for dig.
62. Rellax
Rellax er til smukke parallax. Det er et lette vanille JavaScript-bibliotek, der giver en subtile touch af 3D-dimension til grænseflader.
63. Tilt.js
Tilt.js producerer spændende parallax-drevet tilt effekt. Det vil flytte objekter i skrånende stilling imitere 3D i et grundlæggende 2D-plan. Du kan rette en akse, hvorved effekten bliver mere tiltrækkende og interessant, eller genskabe en slags blænding eller flydende følelse.
64. Transform-hvornår
Transformationsbaseret når er en fantastisk løsning til at designe historiefortællinger med høj ydeevne og indbygget support til mobile enheder. Det væddemål på to vigtige parametre: tid og rulle position og dermed gøre brugerens eventyr gennem grænsefladen vigilantly styret af din side. Det virker med både SVG og almindelige HTML-elementer.
65. CSS3 Animation
Det her er en ældre skole generator med et live preview for at skabe grundlæggende CSS3 animationer. Der er et standard kontrolcenter, hvor du kan justere overgangens varighed, antal iterationer, timingfunktioner osv. Rutinen er enkel: Indstil alt, kopier de resulterende HTML- og CSS-koder og indsæt dem i dit projekt.
66. Curve.js
Curve.js puster livet i linjer, der gør dem "dans" og springer ligesom en bølge. Brug den til at skabe en abstrakt elegant geometrisk-inspireret baggrunde eller centerpieces.
67. Animator.js
Animator.js siges at være fleksibel, effektiv og lys. Det giver den nemmeste måde at styre keyframes og generere CSS animationer af forskellige skalaer. Det er også afhængighedsfrit.
68. Cel-animation
Cel-animation er en Sass mixin, der giver dig kontrol over de traditionelle keyframes. Du kan sætte SVG eller nogen form for HTML-elementer i gang.
69. Scrollissimo
Scrollismo blev oprettet for at arbejde i partnerskab med Greensock dygtigt og smidigt animerende objekter på brugerens rulle. Med et ekstra ledsagende JavaScript-plugin til gadgets til berøringsskærmen dækker det adskillige enheder.
70. jqClouds
jqClouds er et primitivt plugin, der genererer og befolker et design med bevægende skyer, der svæver over grænsefladen. Du kan ændre konceptet, erstatte skyer med ethvert andet objekt, for at give en statisk grænseflade en særlig dynamisk smag.
71. Farveanimation
Som du har gættet, dette værktøj er til at animere tone og gennemsigtighed af baggrund, grænse eller tekst. Faktisk virker det med farve på ethvert objekt, der har det som en ejendom.
72. Flubber
For at udelukke pludselige spring og drastisk metamorfose, der kan opstå, når en objekt konverterer til en anden, du kan bruge Flubber . Pluginet giver glatte interpolationer mellem de to former. Den eneste ulempe er, at den kun virker med 2D-grafik.
73. Partikler.js
Hvis du er op til legende partikler animation-et populært valg i dag-du kan bruge Denne handy generator . Det er baseret på et brugbart JavaScript-bibliotek, der gør alt arbejdet. Indstil præferencer som farve, tal, form, størrelse, opacitet osv. Og eksporter blot resultatet.
74. 3D Lines Animation med Three.js
Dette er et lille script det har ikke alle de ovennævnte plugins kapacitet. Ikke desto mindre tilføjer det til din grænseflade en smuk animeret baggrund fyldt med partikel animation. Du kan konfigurere farve, linjer, uigennemsigtighed og nogle andre muligheder for at gøre det blendende i dit miljø.
75. Three.js
Sidst men ikke mindst, Three.js - Et kraftfuldt og alsidigt bibliotek, der står bag mange imponerende hjemmesider. Det er velegnet til både enkle og komplekse projekter. Det lader dig arbejde med
