75 Webanimatietools die u moet proberen
Animatie is een van die trends die zijn klauwen in webinterfaces heeft gekregen. De populariteit fluctueert, maar het is er altijd, als een essentieel onderdeel van elke website.
Van kleine, nauwelijks zichtbare, laadspinners tot hele pagina-overgangen zoals een filmervaring, animatie reikt naar elk gebied van onze ontwerpen.
Voor ontwerpers die animatie willen integreren, zijn er een schat aan opties beschikbaar. Van puur decoratieve overgangen die de interfaces net zo mooi maken, tot zinvolle effecten die de gebruikerservaring verbeteren, onze collectie bevat hulpmiddelen waarmee u animaties van verschillende schaalniveaus en voor verschillende doeleinden kunt maken. Hier zijn 75 plug-ins en bibliotheken die u wilt bekijken; je zult ze niet allemaal elke keer gebruiken, maar elk heeft een ideale use-case, en sommige zul je steeds opnieuw gebruiken ...
1. Animate.css
Animate.css is een fundamentele bibliotheek met nette cross-browseranimaties die ten grondslag liggen aan veel oplossingen. Van klassieke bouncings en fadings tot moderne wendingen en unieke effecten, het voldoet aan de behoeften van bijna elk project.
2. Magische animaties
Magische animaties richt zich op uitzonderlijke effecten die een interface een bepaald elan geven. Hoewel de bibliotheek niet kan bogen op een immense diversiteit, is het voldoende om de gebruikerservaring te verrijken.
3. Bounce.js
Bounce.js is een kleine speeltuin waar je experimenten kunt uitvoeren met op CSS gebaseerde animaties. Voeg gewoon een component toe en stem de instellingen af om alles tot leven te brengen. En aan het einde exporteert u het CSS-bestand.
4. AnijS
anijs helpt bij het omgaan met animaties op een intuïtieve manier met behulp van eenvoudige instructies zoals If, On, Do, To. Het mooie is dat je welkom bent om je eigen klassen te gebruiken of zelfs Animate.css (eerder genoemd) om iets geweldigs te maken.
5. Snabbt.js
Snabbt.js is beroemd om zijn minimale aanpak die zorgt voor snelle animaties. Het weegt slechts 5 kb; het is echter in staat om elke component een zichtbare boost te geven door zijn vorm te vertalen, draaien, schuintrekken, schalen of de grootte ervan te wijzigen.
6. Kute.js
Kute.js is een echte animatiemotor die uitstekende prestaties levert. Het is snel en compatibel in verschillende browsers, dankzij een reeks van levensvatbare fallbacks die omgaan met oudere browsers. Het wordt geleverd met een groot aantal plug-ins om een efficiënte werkomgeving te bieden.
7. Velocity.js
Velocity.js is een animatiemachine die op het eerste gezicht niet representatief lijkt. Het arsenaal omvat echter alle reguliere soorten animatie, zoals morphing, loop, easing, scrolling etc. Het is snel en jQuery-onafhankelijk.
8. Lazy Line-schilder
SVG-padanimaties zijn gemakkelijk gemaakt met Lazy Line Painter . Neem je lijnillustraties van de Illustrator in SVG-formaat en upload deze naar de converter. De laatste genereert een jQuery-bestand dat het animatieproces afhandelt. Als dit nodig is, kunt u rechtstreeks in de code wijzigingen aanbrengen.
9. SVG.js
SVG.js biedt u een intuïtieve omgeving waarin u SVG's kunt manipuleren en animeren. Het is klein en onafhankelijk met schone syntaxis en uniforme API. Doe wat je wilt: animeer grootte, kleur, positie, tekstpaden; componenten transformeren; bind evenementen etc.
10. Motion UI
In tegenstelling tot de vorige voorbeelden, Motion UI heeft het voordeel van SASS om intrigerende CSS-animaties te maken. Er is een hele reeks voorgedefinieerde overgangen en effecten die op elke HTML-component kunnen worden toegepast. Alles werkt in alle populaire browsers behalve IE9.
11. Wacht! bezielen
Wacht! bezielen laat u vertragingen en wachttijden in animaties op een eenvoudige manier bedienen. Bereken alle vereiste tijdsintervallen via het kleine paneel en bouw een natuurlijke animatie zonder drukte.
12. Dynamics.js
Dynamics.js is een door JavaScript aangedreven bibliotheek die 9 standaardeffecten biedt om mee te spelen. U kunt duur, frequentie, wrijving, anticipatiegrootte en anticipatiesterkte opgeven om real-life op fysica gebaseerde animaties te bereiken.
13. Choreographer.js
Met Choreographer.js binnen handbereik moet je niet bang zijn voor complexe animaties, omdat deze JavaScript-bibliotheek al het zware werk doet. Hoewel het een beperkt aantal animaties behandelt, kunt u met aangepaste functies werken, zodat u uw eigen meesterwerken kunt maken.
14. Anime.js
Met een indrukwekkende reeks functies waarmee meerdere animaties kunnen worden gekoppeld, verschillende instanties kunnen worden gesynchroniseerd, lijnen kunnen worden getekend, voorwerpen kunnen worden gewijzigd, afzonderlijke animaties kunnen worden gemaakt, enzovoort. JavaScript-animatiemotor zal je verrassen met zijn potentieel.
15. Mo.js
Mo.js staat voor beweging voor het web. Het is ongelooflijk snel en tegelijkertijd intuïtief en eenvoudig. Creëer boeiende paden, onverwachte modale overgangen in de dialoog, bubbellay-out, bursting-animaties en nog veel meer.
16. Sequence.js
Sequence.js is een CSS-gestuurde raamwerk voor het bouwen van responsieve aanraakgestuurde stap-gebaseerde animaties. Het is ideaal voor het maken van schuifregelaars, presentaties, banners en andere soorten dynamische componenten. Onder de verschillende premium-plannen vindt u een gratis programma dat u een persoonlijke open-sourcelicentie verleent.
17. Vijftig
onbetrouwbaar is een tweening-engine met een sterke focus op optimalisatie, snelle prestaties, flexibiliteit en uitbreidbaarheid. Het wordt beschouwd als een levensvatbaar alternatief voor GreenSock maar met een veel eenvoudigere interface.
18. Het is dinsdag
dinsdag is een stand-alone animatiebibliotheek die in combinatie met andere bibliotheken kan worden gebruikt. Het maakt de ingangen en uitgangen er glad, subtiel en elegant uitzien. Het biedt een verscheidenheid aan standaard effecten, zoals fade-ins, expand-ins, shrink-ins, drop-ins, etc.
19. CSS Animate
CSS Animate is een primitieve speeltuin die een geldige en overzichtelijke code genereert voor elke reguliere animatie. Stel naam, klasse, animatie-eigenschappen, frame-eigenschappen in; manipuleer tijdlijn en voeg markeringen toe: pas in één woord alles aan dat u nodig hebt om een normale keyframe-gebaseerde animatie te produceren.
20. Vivus.js
Verzenden met drie soorten animatie: vertragen, synchroniseren en een voor een onthullen, Vivus.js zal een SVG op een vlotte en natuurlijke manier tekenen, waardoor het ontstaan van het onderdeel een mooie ervaring wordt. U kunt kiezen voor vooraf gedefinieerde animaties of uw eigen aangepaste functies gebruiken.
21. Bonsai.js
Bonsai.js is een JavaScript-bibliotheek voor geavanceerde grafische manipulaties. Het heeft een vrij eenvoudige API en SVG-renderer. Gebruik de online editor om een proefrit te maken, maak uzelf vertrouwd met de syntaxis en download zelfs enkele voorbeelden om aan de slag te gaan.
22. GSAP door GreenSock
GSAP is een krachtig animatieplatform dat is gericht op professionele animaties. Het heeft verschillende plug-ins en hulpprogramma's die verantwoordelijk zijn voor verschillende soorten animaties. Het bestaat uit BezierPlugin, CSSPlugin, DrawSVGPlugin, MorphSVGPlugin, Physics2DPlugin, TweenLite, etc.
23. Popmotion
Popmotion is een ander lichtgewicht en handig alternatief voor Greensock in onze collectie. Het is een bewegingsengine met volledige controle over elk frame. Het heeft een geavanceerde tween, kleurenmenging en een hele reeks functies en acties voor het bouwen van complexe oplossingen.
24. Tween.js
Een groot aantal ongelooflijke dingen is gemaakt met de hulp van Tween.js . Het is een geavanceerde tweening-engine met talloze parameters om de animatie onder controle te krijgen. Het is ook een uitstekende oplossing voor het verbeteren van projecten die worden aangestuurd door Three.js.
25. Hover.css
Hover.css 'bibliotheek kan worden onderverdeeld in verschillende basiscategorieën: 2D-overgangen, achtergrondovergangen, pictogramanimaties, grensovergangen, schaduw- en gloedovergangen, tekstballonnen en krullen. Pas deze effecten zonder beperkingen toe op elk element in uw ontwerp.
26. Doorgang
De lijst met functies van doorvoer is vrij kort maar bevat de meest essentiële dingen voor het bouwen van 2D- en 3D-transformaties. U kunt bijvoorbeeld vertragingen en looptijden opgeven, versnellingsfunctie toevoegen, relatieve waarden gebruiken en meer.
27. Raket
Raket is een oplossing voor het mooier maken van de beweging van een object van het ene punt naar het andere. Er zijn 8 speciale effecten, zoals pulsatie of rotatie, die deze reis een heerlijke sfeer geven .
28. Animo.js
Animo.js is een relatief kleine tool voor het verwerken van overgangen en animaties. Het heeft een reeks extra plug-ins zoals aftellen, roteren en animeren die de bibliotheek verrijkt en het veel gemakkelijker maakt om het gewenste effect te bereiken.
29. Shift.css
Shift.css is een framework om animaties te bouwen binnen een container die zowel geneste als adaptieve elementen beïnvloedt. Er zijn 15 soorten standaardanimaties, waaronder bewegen, invoeren, verlaten, droppen en nog wat andere.
30. CSShake
CSShake wordt geleverd met elf klassen die de elementen van je DOM dwingen te schudden. U kunt kiezen voor richting (horizontaal of verticaal), type (vast, gek, constant, brok), intensiteit (langzaam of hard) of gewoon kiezen voor een standaardoptie.
31. Saffraan
Als u liever mixins gebruikt om animaties en overgangen eenvoudig en snel te bewerken Saffraan is zeker voor jou. Het is een compilatie van herbruikbare methoden die zijn geschreven in Sass, waar u variabelen en parameters kunt instellen.
32. CSSynth
CSSynth is een kleine editor waar je kunt genieten van de schoonheid van synchronisatie. De animatie is gebaseerd op een reeks vierkanten waarvan u het aantal kunt opgeven in het linkerdeelvenster. Selecteer een effect, stel vertraging in en kies of u de resultaatcode in CSS- of SCSS-indeling wilt downloaden.
33. Ceaser
Ceaser is een oud, beproefd hulpmiddel voor het uitvoeren van experimenten met de klassieke versnellingsanimatie. Er is een aantal varianten die lineair beginnen en eindigen met de aangepaste variant. Twee extra parameters (duur en effect) helpen het resultaat te perfectioneren.
34. Morf.js
Om de bovengenoemde tool een beetje verder te nemen, kunt u het proberen Morf.js . Het biedt overgangen op basis van aangepaste easing-functies. Er zijn bijna 40 voorgedefinieerde opties die u snel kunt aanpassen aan uw project.
35. Voxel.css
Voxel.css is speciaal gemaakt voor 3D-renderings. Dankzij de eenvoudige implementatie kunnen zelfs nieuwkomers de 3D CSS begrijpen. De bibliotheek heeft 4 belangrijke klassen: Scene, World, Editor en Voxel die helpen om games te bouwen en te genieten van de actie.
36. Repaintless.css
Repaintless.css maakt gebruik van de FLIP-techniek om animatie snel en soepel te maken. Hoewel het enkele verbeteringen vereist; toch is het een perfecte start voor diegenen die bijzondere aandacht besteden aan de prestaties.
37. MixItUp
Meng het is een bibliotheek voor het verfraaien van filteren, sorteren, invoegen en andere standaardacties die inherent zijn aan de meerderheid van interfaces, zoals portefeuilles, galerijen, enz. Het is een afhankelijkheidsversie en belooft een hoog prestatieniveau te bieden.
38. Val op
Zoals de titel aangeeft, pardoes is voor het tonen en verbergen van dingen op een prettige manier; voorspelbaar, het algemene gebruik ervan ligt in het bouwen van schuifregelaars. Niemand weerhoudt je ervan om zijn potentieel te benutten en iets interessants en intrigerends te creëren.
39. Ramjet
ramjet transformeert het ene element in het andere met de illusie van beweging die wordt gerealiseerd door middel van versnellingsfunctie. Het is in staat om te werken met DOM-elementen, SVG's, statische afbeeldingen of geanimeerde afbeeldingen.
40. jQuery DrawSVG
Gebaseerd op een krachtige jQuery-animatiemechanisme trekt het efficiënt alle paden in de SVG waardoor de foto een dramatische en tegelijkertijd elegante entree krijgt. De procedure is eenvoudig: toevoegen de plug-in naar de pagina, initialiseer het en voer de animatie uit.
41. Animatic.js
Animatic.js is een geweldige browser-browseroplossing met geïntegreerde natuurkundevoorschriften die gebruikmaakt van CSS-transformaties, 3D-transformaties en JavaScript om alles tot leven te brengen. Zijn belangrijkste taak is om je inspanningen voor het animeren van verschillende objecten tegelijk te verminderen. U kunt zowel parallelle als sequentiële animaties maken door de duur, vertraging en versoepelingsfunctie zorgvuldig aan te passen.
42. Move.js
Move.js is een eenvoudig hulpmiddel voor het maken van reguliere animaties, zoals schalen, scheeftrekken, verplaatsen of vertalen. Elke animatie kan worden verbeterd met de klassieke gemaksfunctie.
43. Eg.js
Eg.js is een zorgvuldig samengestelde verzameling van verschillende effecten en dynamische elementen die gericht zijn op het verbeteren van interacties in de interfaces. Er zijn 8 krachtige componenten die basistaken en 6 hoofdmethoden en gebeurtenissen voor andere doeleinden uitzoeken.
44. GFX
GFX is een boeiende 3D-animatiebibliotheek voor het programmeren van CSS3-animaties op een programmatische manier. Het werkt met jQuery waardoor het veel eenvoudiger wordt om het gewenste resultaat te produceren. Je kunt spelen met schalen, draaien, vertalen, schuintrekken en nog wat andere dingen.
45. Stylie
Hoewel er wordt gezegd dat Stylie is een hulpmiddel voor de lol, maar het zal zeker indruk op je maken met zijn mogelijkheden. Het controlecentrum beschikt over 4 tabbladen waarmee u hoofdframes, versmalling, exportopties en HTML kunt aanpassen, waardoor complexe animaties eenvoudig zijn.
46. Iconate.js
Iconate.js injecteert leven in de transformaties van iconen, waardoor een overgang tussen twee items wordt verbeterd door een aangenaam begeleidend effect. Het werkt niet alleen geweldig met Font Awesome, maar ook met Glyphicons en zelfs je eigen aangepaste set pictogrammen.
47. AnimateMate
AnimateMate is een kleine tool voor het produceren en exporteren van kleinschalige animaties vanuit uw Sketch-omgeving. Het is niet iets bijzonders, maar het stelt je in staat om met keyframes te spelen, versnellingsfuncties toe te voegen, reeksen te besturen en nog meer.
48. CAAT
CAAT (wat staat voor Canvas Advanced Animation Toolkit) is een echt raamwerk dat een krachtige tandem vormt met JavaScript. De toolset bevat scènes, multi-weergave technologieën, knipmaskers, standaard gedragspakketten, enz.
49. Granim.js
Granim.js is een kleine JavaScript-bibliotheek voor het opfleuren van interfaces met interactieve op gradiënt gebaseerde centerpieces. Dit kan een standaard radiale gradiëntanimatie zijn, dynamische gradiënten die boven de achtergrond van de afbeelding worden toegepast of bewegende overgangen in combinatie met afbeeldingsmaskers.
50. Animista
Gemaakt door Ana Travas, Animista is een speeltuin voor het uitvoeren van experimenten met een aantal conventionele en soms vooraf gedefinieerde CSS-gestuurde animaties. Kies duur, timingfunctie, vertraging, iteratietelling en enkele andere opties om de uitkomst te onderzoeken.
51. Obnoxious.css
Obnoxious.css wordt geleverd met 5 unieke op CSS gebaseerde animaties die de elementen van de interface dwingen om het stroboscoopeffect te schudden, te verdraaien, te vergroten, te imiteren of het gewicht van het lettertype te veranderen. Het enige wat u hoeft te doen is om de gewenste klasse toe te passen op de gewenste div.
52. Animatelo
Animatelo bevat een heleboel opvallende dynamische effecten die zijn geleend van de beroemde en krachtige Animate.css, waardoor ze gemakkelijker kunnen worden toegepast. Dankzij de Web Animations API polyfill wordt deze ondersteund door alle moderne browsers.
53. Foxholder
Foxholder is een pakket van 15 leuke kleine effecten die speciaal zijn gemaakt voor het verbeteren van gebruikersinteracties met het formulier. Elke methode benadrukt het invoerveld op zijn eigen manier: het kan de rand helderder maken, visuele aanwijzingen toevoegen, in bewegingstekst instellen en nog veel meer.
54. Rhythm.js
Rhythm.js gaat alles over speelse, op disco's geïnspireerde kleine animaties. Deze JavaScript-bibliotheek bevat effecten die een soort danspasjes imiteren. Er zijn bijna 20 opties die boogie-woogie aan uw website zullen toevoegen.
55. Colorido.js
Net zoals de Granim.js, deze plug-in voor JavaScript is gemaakt om de eigenschap kleur te manipuleren. Het helpt om de tonen en dekking van de achtergrond en tekst dynamisch te wijzigen en niet-statische radiale, lineaire, diagonale en horizontale hellingen te maken.
56. Barba.js
Barba.js maakt gebruik van PJAX (een ajax-gebaseerde techniek) om gebruikers te ontlasten van zogenaamde hard refresh-switching tussen de pagina's. Het verbergt gewoon de oude container en toont de nieuwe container op een subtiele, oogstrelende manier.
57. ScrollReveal.js
ScrollReveal.js is een populaire tool voor het maken van schuifanimaties. Met de methode main reveal () kunt u verschillende animaties beheren en al hun standaardaspecten beheren. Het mooie is dat het goed werkt met zowel web- als mobiele browsers.
58. Scrollanim
Scrollanim is minder verfijnd en toch handiger en eenvoudiger te gebruiken dan in het vorige voorbeeld. Hoewel het CSS3 bevoordeelt, maar het stelt je in staat om animaties toe te voegen met JavaScript API om scroll-getriggerde animaties te produceren. Het heeft een aantal vooraf gebouwde oplossingen die u snel kunt voorstellen aan uw project.
59. ScrollTrigger
Terwijl de vorige twee oplossingen zich vooral concentreren op traditioneel verticaal scrollen, deze is voor het bouwen van lange horizontale websites. Hiermee kunt u dynamische interfaces bouwen in het x-asvlak dat is gevuld met prachtige CSS3-animaties met behulp van een nogal primitieve syntaxis.
60. Force.js
Force.js is een kleine oplossing die enorme functionaliteit en veel keuzemogelijkheden ontneemt. Het is echter ideaal voor normale taken, zoals het instellen van objecten op subtiele bewegingen of prettiger scrollen. Zoals gebruikelijk, het verlichten van leugens in de kern van het maken van animatie schoon en netjes.
61. AOS
AOS staat voor animatie bij bladeren. Het doet wat het zegt - bied je een aantal levendige, vooraf gedefinieerde effecten die worden geactiveerd door een scrolling-evenement. Als je secties een dramatische entree wilt geven zonder diep in code te graven, dan is het zeker iets voor jou.
62. Rellax
Rellax is voor prachtige parallax. Het is een lichte vanille JavaScript-bibliotheek voor het geven van een subtiel vleugje 3D-dimensie aan interfaces.
63. Tilt.js
Tilt.js produceert een intrigerende door parallax aangedreven kanteleffect. Het verplaatst objecten naar een hellende positie en imiteert 3D in een standaard 2D-vlak. Je kunt een as repareren waardoor het effect aantrekkelijker en interessanter wordt, of een soort van schittering of zwevend gevoel creëren.
64. Transformeren-wanneer
Transform-when is een geweldige oplossing voor het ontwerpen van storytelling-ervaringen met een hoge prestatie en native ondersteuning voor mobiele apparaten. Het wedt op twee vitale parameters: tijd en scroll-positie, waardoor het avontuur van de gebruiker door de interface wordt bewaakt, die waakzaam aan jouw zijde wordt bestuurd. Het werkt met zowel SVG- als normale HTML-elementen.
65. CSS3-animatie
Deze is een old-school generator met een live preview voor het maken van eenvoudige CSS3-animaties. Er is een standaard controlecentrum waar u de duur van de overgang, aantal iteraties, timingfuncties enz. Kunt aanpassen. De routine is eenvoudig: alles instellen, de resulterende HTML- en CSS-codes kopiëren en in uw project plakken.
66. Curve.js
Curve.js blaast leven in lijnen waardoor ze "dansen" en draaien net als een golf. Gebruik het om abstracte elegante, geometrisch geïnspireerde achtergronden of centerpieces te maken.
67. Animator.js
Animator.js wordt gezegd flexibel, efficiënt en licht te zijn. Het biedt de gemakkelijkste manier om de keyframes te beheren en CSS-animaties van verschillende schalen te genereren. Het is ook afhankelijk van de afhankelijkheid.
68. Cel-animatie
Cel-animatie is een Sass-mix die je controle geeft over de traditionele keyframes. U kunt SVG of elk type HTML-element in beweging zetten.
69. Scrollissimo
Scrollismo is gemaakt om samen te werken met Greensock, door vakkundig en vloeiend objecten te animeren op de schuifbalk van de gebruiker. Met een extra meegeleverde JavaScript-plug-in voor gadgets op het aanraakscherm bestrijkt deze tal van apparaten.
70. jqClouds
jqClouds is een primitieve plug-in die een ontwerp genereert en bevolkt met bewegende wolken die boven de interface zweven. U kunt het concept wijzigen door wolken te vervangen door een ander object om een statische interface een bepaalde dynamische smaak te geven.
71. Kleuranimatie
Zoals je al geraden hebt, deze tool is voor het animeren van de toon en transparantie van achtergrond, rand of tekst. Eigenlijk werkt het met de kleur van elk object dat het als een eigenschap heeft.
72. Flubber
Om plotselinge sprongen uit te sluiten en drastische metamorfose die kan optreden wanneer het ene object wordt omgezet in het andere dat u kunt gebruiken Flubber . De plug-in biedt soepele interpolaties tussen de twee vormen. Het enige nadeel is dat het alleen werkt met 2D-afbeeldingen.
73. Particles.js
Als je een speelse deeltjesanimatie hebt, tegenwoordig een populaire keuze, kun je gebruiken deze handige generator . Het is gebaseerd op een levensvatbare JavaScript-bibliotheek die al het werk doet. Stel voorkeuren in zoals kleur, aantal, vorm, grootte, dekking enz. En exporteer eenvoudig het resultaat.
74. Animatie van 3D-lijnen met Three.js
Dit is een klein script die niet over alle mogelijkheden van de bovengenoemde plug-ins beschikt. Niettemin, het voegt aan je interface een prachtige geanimeerde achtergrond toe gevuld met deeltjesanimatie. U kunt kleur, lijnen, dekking en enkele andere opties configureren om deze in uw omgeving te laten overvloeien.
75. Three.js
Tenslotte, Three.js - een krachtige en veelzijdige bibliotheek die achter tal van indrukwekkende websites staat. Het is geschikt voor zowel eenvoudige als complexe projecten. Hiermee kunt u werken
