Mijn Personal Passion Project, is ook werkelijk een personal project, iets dat uit mijn eigen persoonlijke passie vooruitkwam, en is dit iets voor mezelf om mijn eigen skills te verbreden.
Als digital creative werk ik heel graag het design met development tot in de puntjes uit. Waarbij mijn websites steeds min of meer statisch eruit zagen qua look-and-feel, wil ik hier verder op in gaan door dynamische animaties toe te voegen. Tijdens de design lessen wordt er vaak teruggekoepeld naar micro-animaties, die ik dan in mijn design herwerk, maar als developper mis ik eigenlijk de skills om dit te coderen.
Ik kijk vaak op naar websites die op Awwwards staan, hun animaties verrijken de user experience. Als developer heb ik geen idee hoe dit aan te pakken, en dit is iets waar ik verandering in wil brengen. Op het einde van de 5 weken wil ik sterker in mijn schoenen en mezelf een expert kunnen noemen in webanimaties binnen een web framework, in dit geval React.
Research question: How to create a better user experience with interactive web animations within a React framework
Ik wil binnen een web framework zoals React, 2D & 3D webanimaties kunnen gebruiken op een effeciënte manier. Waarbij de animaties de functionaliteit van de website niet wegneemt, en de website nog steeds responsive blijft. Aangezien WebGL & GSAP de standaard zijn voor webanimaties, wil ik mij daar op focussen. Maar zeker in de eerste week, wil ik graag op zoek gaan naar andere mogelijkheden en verschillende demo's opstellen, vertrokken vanuit verschillende libraries. Op die manier wil ik de sterktes en zwaktes leren kennen van verschillende libraries.
Doorheen de weken wil ik mijn lat hoger zetten voor de mijn webanimaties, terwijl ik mijn progress goed bijhoudt zodat ik deze als handleiding steeds kan doornemen als het ware. Op het einde van de rit, wil ik mezelf een expert kunnen noemen voor webanimaties, wetende hoe ik binnen verschillende used cased welke technologie te gebruiken en animaties kan coderen. Ik had graag deze webanimaties toegepast op mijn eigen portfolio website.
- Zelfgeschreven handleiding over 2D & 3D animaties Dit gaat hem niet zozeer over de progress zelf, maar met uitleg hoe de technologie toe te passen. Dit zullen bruikbare up-to-date code zijn en toegepaste voorbeelden waarbij steeds teruggegrepen kan worden in de toekomst, maar ook perfect bruikbaar zou kunnen zijn voor iemand zonder ervaring met 2D / 3D animeren - hierbij wordt wel kennis van React verwacht.
- Uitgewerkte demo's van de verschillende gebruikte libraries
- Eén verder uitgewerkte responsive website binnen React framework waarbij een combinatie van 2D & 3D animaties inzit.
- Week 1: research & playground. Onderzoeken naar de verschillende technologieën, al dingen uittesten binnen React, API van libraries doornemen en begrijpen
- Week 2: focus op 2D animaties & toepassen in demo's, GSAP of andere technologiën die in week 1 ontdekt zijn
- Week 3: focus op 3D animaties & toepassen in demo's, WebGL & ThreeJS of andere technologiën die in week 1 ontdekt zijn
- Week 4 & 5: grote demo uitwerken waarbij alles van voorbije weken samenkomt
Week 1 staat al uitgewerkt onder 'Projects', de overige weken, naarmate dat de demo's duidelijker worden, zullen toegevoegd worden en aangevuld. Wat voor soort demo's staat voor mij niet zozeer hard. Het is de leerervaring en handleiding die voor mij de focus wordt binnen de 5 weken, zodanig dat ik dit later zelf in websites kan toepassen.
Na de feedback bij de presentatie pitch en gesprek met de coach is mijn visie aangepast. Met nog steeds dezelfde uitgangspunt - Kerst, interactie en animatie, maar met een concept die beter defined is, in plaats van losse demo's. Het nieuw concept is het creeëren van een website waarbij users realtime een kerstboom kunnen versieren. Door kerstbollen op een kerstboom te plaatsen met een tekstje bij, kunnen mensen via digitale weg in een corona-proof gezamenlijk de kerstboom versieren.