In het drukke Brussel tussen alle zoevende steps door vond Workshop Summit voor het eerst plaats. Voor onze front-end developer Nick was het al snel duidelijk welke workshop er het meest uit zou springen, namelijk deze over SVG animaties.
Weet je nog die keer dat je op de “bestellen” klikte om iets toe te voegen aan je winkelmandje en er visueel niets gebeurde waardoor je er nog maar eens op klikte? Met als gevolg dat er plots meerdere items in je winkelmandje zaten?
Zeker het gewenste resultaat niet wanneer je maar één item in je winkelmandje wil hebben.
Dergelijke zaken kunnen visueel perfect opgevangen worden door animaties, door bijvoorbeeld een visuele indicator te voorzien dat het achterliggende systeem bezig is je winkelmandje te updaten.
Dit is slechts één voorbeeld van een situatie waarin animaties de website gebruiker kunnen begeleiden en informeren. Maar animaties doen meer dan enkel dat. Ze helpen ook bij het gevoel dat de gebruiker krijgt van hoe vlot de website werkt, namelijk de perceived performance.
Bij animaties is het ook heel erg belangrijk om in het achterhoofd te houden dat de animatie de aandacht niet mag afleiden van wat belangrijk is op de website. Animeer dus zeker geen onnodige zaken.
Wil je meer weten over enkele basisprincipes bij animaties op je website? Check dan zeker deze video
Wees niet bang om te experimenteren en durf zeker ook te combineren want zo creëer je effecten en animaties die je anders niet voor mogelijk achtte
SVG animaties
Een SVG of een Scalable Vector Graphic is een type afbeelding die ervoor zorgt dat je deze zo groot of zo klein kan maken als je zelf wil, zonder dat er hierbij enige kwaliteit verloren gaat. Het leuke bij deze afbeelding is dat je effectief een DOM hebt, waardoor je ieder deeltje van je SVG kan aanspreken en manipuleren met CSS of JS.
Tijdens de workshop kwamen de begrippen viewbox, viewport, defs, use, linear gradients, … naar boven. Hiermee mochten we ons volledig laten gaan en animaties creëren naar onze wildste dromen. Het is heel fijn om hier zo zot in te mogen gaan, maar we raden toch aan om het in het begin simpel te houden tot je alles goed onder de knie hebt. Want zeker bij het bepalen van de punten en het begrijpen van de waarden binnen je SVG path kan dit enige oefening vergen.
Enkele handige links bij SVG animaties:
- https://developer.mozilla.org/en-US/docs/Web/SVG/Element
- https://css-tricks.com/svg-path-syntax-illustrated-guide
CSS animaties
Bij CSS animaties is het eerst en vooral belangrijk om te weten waar je deze het best kan gebruiken. Bij het openen van een menu dat standaard niet zichtbaar is op het scherm, kan je CSS animaties bijvoorbeeld perfect gebruiken. Hierbij kan het interessant zijn om het menu van links uit te laten verschijnen zodat de gebruiker een visuele verandering ziet. Als men dit menu terug wil sluiten, dan schuift dit terug naar waar dit in eerste instantie vandaan kwam. Zo krijgt de gebruiker dus steeds het gevoel dat hij of zij weet waar dit menu te vinden is.
Bij complexere animaties, zoals het bewegen van een landschap waar er een reeks van opeenvolgende of overlappende animaties plaatsvinden, zou het dan weer overkill zijn om hier enkel CSS animaties voor te gebruiken. Het is zeker mogelijk in CSS, maar het resultaat zou niet opwegen tegen de hoeveelheid werk, de performantie van de animatie, ... Voor dergelijke complexe animaties is JS een betere optie.
Bij CSS animaties heb je gelukkig verschillende stijlen die met weinig moeite door de browser geanimeerd kunnen worden, namelijk:
- transform: translate(valueX, valueY);
- transform: scale(value);
- transform: rotate(value);
- opacity: value
Meer info omtrent CSS animaties & keyframes:
JS animaties
Bij JS animaties heb je een breed aanbod aan verschillende libraries, maar tijdens de workshop werd de focus gelegd op de Greensock library. Deze library werkt met een tijdlijn wat ervoor zorgt dat overlappingen en opeenvolgende animaties makkelijker te bepalen zijn dan in CSS. Denk maar aan een videobewerkingsprogramma waar je kan scrollen over je timeline om ieder fragment te bekijken.
Dit kan je zelf ook binnen Greensock door gebruik te maken van ScrubGSAPTimeline();.
Deze feature komt zeker van pas naarmate je veel animaties hebt om ze zo stap per stap te kunnen ontleden.
Bij de Greensock library is het belangrijkste element een “tween”. Een tween kan je bekijken als een element waar je de klasse of id aan meegeeft alsook de nodige configuratie om deze te animeren.
En om het nog leuker te maken kan je dus bij de Greensock library een tijdlijn aanmaken en deze koppelen aan de gewenste tweens. Waarbij zowel opeenvolgende als overlappende animaties een fluitje van een cent worden ?.
Enkele leuke voorbeelden van JS animaties:
Gepassioneerd helpt Nick je bij alles wat te maken heeft met de front. Hij zorgt voor het feilloos overbrengen van het design naar het web, en gebruikt daarbij de laatste technologieën.