Voortgang week 3 - logo animeren en cirkel interactief maken

Deze week heb ik gewerkt aan het maken van een geanimeerd logo en het creëren van een interactieve cirkel.

Logo animatie

In week 1 en 2 heb ik gekeken naar de technische mogelijkheden van GreenSock en heb ik verschillende technieken uitgeprobeerd. Om te kijken of ik deze kennis ook kan toepassen heb ik dit logo gemaakt: http://codepen.io/codesen/pen/rrZapO

Voor dit logo heb ik gewerkt met een timeline, waardoor de verschillende animaties na elkaar afspelen.

De vierkantjes heb ik gemaakt met CSS en daarvan heb ik, in de timeline, verschillende eigenschappen geanimeerd zoals opacitie, scale en color. 

Ten slotte heb ik tekst toegevoegd (in HTML) en deze tekst geanimeerd zodat hij in komt 'bouncen'. Dit heb ik gedaan door easing te gebruiken. 

Zelf ben ik tevreden met het logo. Niet dat het er heel mooi uit ziet, maar ik heb wel gemerkt dat ik de eerder opgedane kennis ook goed kan toepassen. 

Interactieve cirkel

Het maken van de interactieve cirkel kostte veel tijd. Ik ben er meerdere dagen mee bezig geweest en heb verschillende dingen geprobeerd. Het maken van de cirkel had ik snel gedaan in HTML en CSS en ook de kleur veranderen met een TweenLite kon ik al. Het zorgen voor interactie zorgde echter voor problemen. 

Waar ik als eerste tegenaan liep, was het feit dat er voor GreenSock geen speciale functies voor interactie bestaan. Na enig onderzoek kwam ik erachter dat je DrawSVG-plugin of de Drag-plugin kon gebruiken, maar hiervoor moet je een account hebben waarvoor je moet betalen. Ik ben dus op zoek gegaan naar andere mogelijkheden.

Na wat onderzoek ontdekte ik dat voor interactie je de normale code van JavaScript kan gebruiken. Helaas heb ik nog heel weinig ervaring met JavaScript. Daarom heb ik besloten om eerst via W3schools.com de basis van JavaScript door te nemen. Dit nam een paar uur in beslag. 

Het lukte echter nog steeds niet om mijn cirkel interactief te maken. Daarom besloot ik om op het GreenSock-forum mijn vraag te stellen. De vragen en antwoorden kun je hier vinden: http://greensock.com/forums/topic/15091-interactive-animation/ . 

Toen lukte het mij om een cirkel van kleur te laten veranderen wanneer je er op klikt, maar het terug veranderen wilde nog niet lukken. Het leek mij logisch om hiervoor een 'if/else-statement' te gebruiken, dus daar heb ik nog wat onderzoek naar gedaan. Uiteindelijk bleek er een veel simpelere manier te zijn: namelijk een reverse toevoegen in de code. 

http://codepen.io/codesen/pen/yaYoZZ 

Ik weet nu dus hoe ik een cirkel van kleur kan laten veranderen wanneer je erop klikt. Daarnaast heb ik ook geleerd voor het gebruiken van GreenSock een basiskennis van JavaScript belangrijk is. Ik heb meer geleerd over de JavaScript codering. Ik merkte ook dat het erg handig is om een code (via codepen) toe te voegen wanneer je een vraag stelt op het forum. Ook als je nog eigenlijk bijna niks hebt (in mijn geval alleen een cirkel). 

Mijn gemaakte codes

Logo animatie: http://codepen.io/codesen/pen/rrZapO 

Cirkel animatie: http://codepen.io/codesen/pen/yaYoZZ 

Een poging om te werken met Dragable: http://codepen.io/codesen/pen/bwVAZX

Bronnen

• https://nl.wikipedia.org/wiki/JavaScript (wat is JS)
• http://www.comptechdoc.org/independent/web/cgi/javamanual/javadocument.html  (interactie in JS)
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference (JS reference)
• https://nl.wikipedia.org/wiki/Document_Object_Model (wat is DOM)
• http://www.w3schools.com/js/js_if_else.asp (JS 'if else-statement')
• https://www.hackerrank.com/contests/7days-javascript/challenges/js-if-else-statements (JS 'if else-statement)
• https://www.youtube.com/watch?v=K9ui9eZq1dg (tutorial)  
• http://greensock.com/forums/topic/15091-interactive-animation/ (forum)