10 Beste gratis animatiebibliotheken voor het web
Animatie is een van de belangrijkste trends voor 2018, maar u hoeft het wiel niet opnieuw uit te vinden om beweging toe te voegen aan uw sites. We kijken naar de beste gratis animatiebibliotheken voor webprojecten.
Je kunt wat gekke dingen bouwen met UI-animaties op internet. Dit wordt snel de norm voor moderne websites waar gebruikersbetrokkenheid een groot probleem is.
Als je rondkijkt, vind je tal van code-generators en aangepaste hulpmiddelen om te helpen met animatie. Maar u kunt ook gratis bibliotheken vinden die u tijd besparen in het coderingsproces.
Dit zijn mijn 10 keuzes voor de beste open source webanimatiebibliotheken. Dit omvat een goede mix van JavaScript-bibliotheken en alleen-CSS-animaties. Beide stijlen zijn geweldig en ze hebben allebei hun eigen voor- en nadelen.
Hoe dan ook, ik garandeer je dat deze lijst iets heeft waar je dol op bent.
1. GSAP
De GSAP-bibliotheek is een van de coolste gratis bronnen die beschikbaar is voor ontwikkelaars. Het werkt puur op JavaScript en het is een van de robuustere animatiebibliotheken die je kunt gebruiken.
Het werkt bovenop de HTML5-specificaties en speelt leuk met alle moderne browsers, om nog te zwijgen van het feit dat het team deze bibliotheek voortdurend vernieuwd met nieuwe functies. Het kan werken met SVG's, canvaselementen of zelfs jQuery-objecten, samen met andere gerelateerde bibliotheken zoals EaselJS .
Zeker de moeite van het onderzoeken waard als je een krachtige webanimatiebibliotheek nodig hebt. Dit kan ook eenvoudige taken aan, maar er zijn veel kleinere bibliotheken die je daar kunt proberen.
2. Anime.js
Toen ik het voor het eerst vond Anime.js bibliotheek was ik gevloerd. Dit ding is ongelooflijk krachtig en gaat verder dan eenvoudige UI / UX-animaties.
Met Anime.js kunt u esthetische animaties ontwerpen met logo's, knoppen, afbeeldingen, noem maar op. Dit ondersteunt alle typische gebruikerstriggers zoals klikken / zweven / swipes en u hebt toegang tot een aantal op maat gemaakte animaties.
Als je er naar kijkt de documentatie je kunt een aantal voorbeelden vinden die direct in de pagina zijn ingesloten. En er is een verzameling op CodePen vol met Anime.js voorbeelden om te lezen.
3. Slechte CSS
Hier is een van de nieuwere bibliotheken met een focus op pure CSS-code. Slechte CSS werkt bovenop CSS3-eigenschappen om behoorlijk ongelooflijke resultaten te bieden.
Vanaf de hoofdpagina vind je een aantal live demo's die je in de browser kunt testen. Deze omvatten objectrotaties, flips, slide-ins en zoveel vergelijkbare animatie-effecten.
Sommige van deze zijn misschien eenvoudig genoeg om zelf te bouwen. Maar anderen worden echt complex en dat maakt de Wicked CSS-bibliotheek zo leuk om mee te spelen.
4. Animatie van CSS
Misschien is de definitieve bron voor webanimatie Animate.css . Deze open source-bibliotheek is een aantal jaren geleden uitgebracht en is nog steeds relevanter dan ooit.
Ontwikkelaar Daniel Eden heeft dit project gemaakt als een vereenvoudigde manier om aangepaste CSS3-animaties toe te voegen aan een webpagina. In de loop der jaren is het uitgegroeid tot een volwaardige animatiebibliotheek met voldoende kracht om op elk groot project te draaien.
De startpagina biedt veel demo's, zodat je de animatiestijlen kunt uitproberen en kunt zien wat je ervan vindt. En er is een heleboel geweldige documentatie op GitHub inclusief een lijst met klassen en enkele voorbeeldcodefragmenten.
5. Dinsdag
Het enige waar ik het meest van houd dinsdag is de eenvoud van deze animaties. Met deze bibliotheek bepaalt u hoe elementen verschijnen en verdwijnen van de pagina.
Maar deze animaties zijn niet over-the-top of super glamoureus. In plaats daarvan pakken ze een mooie subtiele stoot in die de esthetiek van de pagina echt verbetert, maar die geen afbreuk doet aan de inhoud of de gebruikerservaring.
Ik heb niet veel websites gezien die dinsdag gebruiken, maar het is misschien wel de schoonste bibliotheek die er is.
Het draait op pure CSS en de animatiestijlen zijn zo redelijk. Ze kunnen zich mengen met elke site en je hebt meer dan een dozijn fade in / fade out-stijlen om mee te werken.
6. CSShake
Ik heb nog geen CSS-bibliotheek gezien die leuk of vreemd is CSShake . Dit is een deel gek en een onderdeel uniek, dus het past waarschijnlijk niet bij elke website.
De reden dat het de lijst is gemaakt, is omdat ik met deze functies geen vergelijkbare bibliotheek kan bedenken. Met CSShake kun je zweefanimaties aansturen met schuddende effecten van allerlei stijlen, allemaal draaien op pure CSS.
Van zachte bewegingen tot krachtig schudden en alles ertussenin, deze bibliotheek heeft het allemaal met een vrij eenvoudige installatie om op te starten.
7. Mo.js
Uit de vele gedetailleerde JavaScript-bibliotheken voor animatie moet ik zeggen Mo.js is een van de beste. Deze bibliotheek is enorm en is er echt voor ontworpen bewegende beelden via UI / UX-animaties.
Maar je kunt dit voor alles gebruiken als je leert hoe het werkt. De codes zijn vrij eenvoudig te manipuleren en er is een een heleboel tutorials je kunt volgen om je leven gemakkelijker te maken.
Is dit de perfecte animatiebibliotheek? Nauwelijks.
Het heeft echter veel geweldige functies en het vereenvoudigt het animatieproces aanzienlijk, of je nu een navigatiebalk, een logo of een ander complex object animeert.
8. Animeren Plus
Ga voor een superlichtgewicht, gemakkelijk te downloaden animatiebibliotheek Animeren Plus . Dit weegt slechts 2 KB wanneer het wordt verkleind en heeft alle basisfuncties die je zou verwachten met aangepaste JavaScript-animaties.
Dit is gemakkelijk te installeren met npm en je kunt het instellen volgens de codefragmenten op GitHub. De meeste hiervan zijn eenvoudige basissymos zodat ze nergens ingewikkeld in worden, maar je kunt alle opties en callback-methoden ook direct op GitHub vinden.
Kijk even naar deze voorbeeld demo Rechtstreeks getrokken uit het codefragment in de hoofdrepo. Het is niet veel, maar het laat je zien hoe je Animate Plus instelt en een beetje standaardcode vanuit het niets uitvoert.
9. Bounce.js
Met Bounce.js je kunt krachtige CSS3- en JS-animaties maken met slechts een paar klikken.
Op de startpagina vindt u eerst een aangepaste animatiebouwer met de focus op modules. Op deze manier kunt u de specifieke gewenste animatiefuncties op de pagina toevoegen zonder extra code toe te voegen.
Het grootste verschil met Bounce.js is dat het niet werkt als alleen een bibliotheek. Hoewel u instellingsinformatie kunt vinden op GitHub , het is niet alleen een basisscript. Het komt eigenlijk met een webbouwer, dus Bounce is een van de weinige animatiebibliotheken die je in je browser kunt stylen.
10. Magie
Leuke animaties met een vleugje speelsheid beschrijven het best Magie bibliotheek.
Deze hele verzameling richt zich op CSS3-animaties en duwen aangepaste stijlen die nergens anders te vinden zijn. Het is een behoorlijk grote verzameling CSS3-codes en je vindt hier ook een hoop leuke trucs. Rotaties, perspectiefflips, vervagende effecten, genoeg om rond te gaan.
Als je naar de demopagina je kunt sommige van deze effecten in actie bekijken.
Toegegeven, deze bibliotheek is nog steeds veel kleiner dan andere CSS3-bibliotheken, zodat deze niet kan concurreren met dinsdag of Animate.css. Maar het heeft veel nette webanimaties die je gewoon niet in andere bibliotheken zult vinden.
