Voortgang week 2

De basis van GreenSock

Door een aantal tutorials te volgen heb ik een goed beeld gekregen van GreenSock. Zo heb ik geleerd dat alle elementen op de pagina worden neergezet in HTML en CSS. GreenSock wordt alleen toegepast in de Javascript files. Het is dus erg makkelijk om afbeeldingen en tekst op de pagina te zetten.

Om te beginnen met GreenSock moet je de link van de download-pagina kopiëren.

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script> 
Deze link plak je in je HTML bestand

Tweens
Met tweens kun je animaties maken in JavaScript. Je moet er eerst voor zorgen dat de afbeelding die je wilt animeren een position absolute heeft. Vervolgens kun je een TweenMax toevoegen.
Dit is een voorbeeld van een tween:

TweenMax.fromTo(".doc9", 1, {scale: 0}, {scale: 1})

Deze tween bestaat uit de volgende onderdelen:
- TweenMax: hiermee geef je aan dat het een tween is
- .fromTo: hiermee geef je aan dat je de animatie van een punt naar een ander punt wilt maken
- ".doc9": dit is de naam van de class van de afbeelding
- 1: dit is de hoe lang de animatie duurt in seconden
- {scale: 0}: dit is de begin grootte
- {scale:1}: dit is de eind grootte

in plaats van fromtTo is het ook mogelijk om from, to of stagger te gebruiken. Bij stagger zullen meerdere elementen met dezelfde class één voor één beginnen met de animatie.
In plaats van scale kan vrijwel elke eigenschap geanimeerd worden. Zoals x/y-positie, opacity of rotation.

Timelines
Met een timeline kun je meerdere tweens achter elkaar laten afspelen. In default begint de volgende tween in de lijst wanneer de vorige is afgelopen. Het is ook mogelijk om de tijd tussen de tweens aan te passen. Een timeline kan ook in zijn geheel sneller of langzamer worden gemaakt.

Easing
Je kunt verschillende manieren van easing toevoegen aan een tween. Bijvoorbeeld ease.Back, ease.Elastic of ease.bounce. Dit zorgt ervoor dat je animatie niet abrupt begint en/of eindigt. Een ease voeg je toe bij de eigenschappen die je wilt animeren in je tween.

.fromTo(".text", 4, {opacity: 0, x:10}, {opacity: 100, x:1300, ease:Bounce.easeOut})

Buttons
Met GreenSock kun je buttons toevoegen aan je animatie. Hiermee kun je de animatie op je pagina makkelijk pauzeren, opnieuw afspelen of omkeren. Hiervoor maak je in HTML en CSS een button, deze button geef je in JS een functie:

restartBtn.onclick = function() {
  tl.restart();
}

Codepen
De bovenstaande dingen heb ik gecombineerd in een code: http://codepen.io/codesen/pen/ozjrKG

Cirkel animeren 

Een handige tool om een cirkel te animeren is met drawSVG. Dit is een plugin die helaas alleen beschikbaar is voor de betaalde versie van GSAP. Op codepen.io is het mogelijk om deze plugin uit te testen. 

Hier zie je een voorbeeld van drawSVG: http://codepen.io/GreenSock/pen/qEdoRE

Zelf heb ik aan de hand van dat voorbeeld deze code geschreven: http://codepen.io/codesen/pen/EgVarR

De opgeslagen versie hiervan werkt helaas niet. Echter wanneer je deze code kopieert in het venster van de GreenSock animatie werkt het wel. Dit heeft te maken met dat de plugin nier werkt bij eigen gemaakte pens.

Bronnen

Deze week heb ik vooral veel tutorials gekeken van GreenSock zelf en van ihatetomatos (klik op de links)

Greensock Getting Started en Jump Start: voor de basis van GreenSock

Playpause: voor de buttons

ihatetomatoes.net GreenSock101: tutorials voor een uitgebreidere kennis van de basiselementen

Ease-visualizer: voor alle mogelijkheden van easing