Insights
💫 Motion,
🛠 Frontend development
Om een aantrekkelijke en moderne UI te bekomen, is het animeren van een website van groot belang. Daarom hebben we bij Appeel gewerkt aan een animatie project “Motion library”. In dit project worden verschillende componenten van een website geanimeerd en de code ervan getoond om zo als inspiratiebron te dienen voor alle collega’s van Appeel.
GSAP
GreenSock Animation Platform (GSAP) is een krachtige JavaScript-library voor het creëren van animaties op het web. Het is ontworpen om snel en efficiënt complexe animaties te creëren en biedt developers verschillende functies om geavanceerde animaties te maken zonder zich zorgen te hoeven maken over prestatieverlies. Enkele van de belangrijkste functies zijn:
Animate: GSAP biedt een eenvoudige manier om elementen op uw website te animeren. Het is zeer flexibel en je kan verschillende parameters instellen, zoals de duur van de animatie, de timingfunctie en de eindpositie van het element.
Timeline: Een krachtige functie van GSAP is de timeline, waarmee je verschillende animaties kan combineren en synchroniseren om complexere animaties te creëren. Je kan meerdere animaties in een timeline plaatsen en deze afspelen, pauzeren en wijzigen wanneer dat nodig is.
Plugins: GSAP biedt vele plugins aan om de animatie-ervaring nog verder uit te breiden. Zo heb je bijvoorbeeld ‘Scrolltrigger’. Met deze plugin kan je animaties combineren met het scrollen door de website.
Easings: GSAP biedt een groot aantal voorgeprogrammeerde timingfuncties, of 'easings', die kunnen worden gebruikt om de animaties te verbeteren. Deze easings bieden verschillende bewegingscurves voor je animaties, waardoor ze realistischer en soepeler worden.
Compatibiliteit: GSAP werkt met alle belangrijke browsers en platformen, waaronder mobiele apparaten en desktops.
Documentatie: GSAP heeft een uitgebreide documentatie die je stapsgewijze instructies geeft voor het gebruik van de library en het creëren van animaties. Er zijn ook tal van voorbeelden en templates beschikbaar om je te helpen aan de slag te gaan. De community is ook snel met het antwoorden op al je GSAP gerelateerde vragen.
Nuxt + GSAP
Bij Appeel is Nuxt de go-to JavaScript framework om aan een website te beginnen. Hierbij komt een probleem kijken: GSAP werkt client-side en Nuxt wordt server-side gerenderd (het is natuurlijk ook mogelijk om deze instelling uit te schakelen). Dit wil zeggen dat GSAP nog niet klaar is wanneer een pagina geladen wordt door Nuxt, dit zorgt voor een conflict en crasht de pagina. Daarom moeten we ervoor zorgen dat alle GSAP animaties gebeuren pas wanneer de pagina beschikbaar is in de client. Een van de oplossingen die we hiervoor gebruiken is de “onMounted” lifecycle hook van Nuxt waarbij alle code in deze functie pas wordt uitgevoerd wanneer de component “mounted” is.
:quality(90))
Conclusie
GSAP is een krachtige animatie-library die developers de mogelijkheid biedt om complexe animaties op het web te creëren. Het biedt een breed scala aan functies en hulpmiddelen, waaronder animatie, timeline, plugins, easings en compatibiliteit. Met de uitgebreide documentatie en de vele voorbeelden en templates is het gemakkelijk om aan de slag te gaan met GSAP. Als je op zoek bent naar een manier om een website of applicatie tot leven te brengen met animaties, is GSAP zeker het overwegen waard.
:quality(100)){kind=small}
Kei
Delen:
Insights
Meer inzichten
:quality(90))
📱 PWA,🛠 Frontend development
PWA. Nu meer dan ooit.
De kloof tussen native en web wordt steeds kleiner. Dat bewijst ook de komst van Push Notifications voor web apps op het Home Screen (PWA’s) in iOS 16.4. Deze functionaliteit was al langer beschikbaar op Android, maar nu kunnen ontwikkelaars dit eindelijk voor beide platforms implementeren. Android en iOS samen hebben een marktaandeel van maar liefst 99% van alle mobiele gebruikers.
:quality(90))
🛠 Frontend development
Alive & Kicking
Als grootste engelstalige Vue conferentie trekt VueJS Amsterdam developers uit elke hoek van de wereld aan. De meeste bezoekers hadden er aan het begin van de conferentie dus net een lange reis op zitten. Hierdoor kreeg de eerste spreker de grote verantwoordelijkheid om niet alleen een sterke eerste indruk achter te laten, maar ook om het publiek wakker te schudden. “Challenge accepted” dacht spreker Tim Benniks ongetwijfeld. Hij haalde namelijk alles uit de kast om de jetlag en vermoeidheid van elke aanwezige weg te blazen met zijn talk “Alive and Kicking”. Je kent de term Rockstar Developer wel, zo kan je Tim best omschrijven.
:quality(90))
🛠 Frontend development
State of the Vuenion 2023
De meest geanticipeerde spreker van Vue Amsterdam was ongetwijfeld Evan You, de maker van zowel Vue.js en Vite. Zijn presentatie heet “State of the Vuenion”, een overzicht op de huidige staat van het Vue.js ecosysteem.