Vorige week had ik al de basiselementen van ScrollMagic geleerd, het was alleen nog niet gelukt om een eigen code te laten werken. Deze week heb ik dus de ongedane kennis van vorige week toegepast en nieuwe mogelijkheden en technieken van ScrollMagic ontderzocht, getest en zelf toegepast.
Aanpak
De code van vorige week werkte niet, dus heb ik op het GreenSock-forum om hulp gevraagd (link naar topic). Ik wist nu hoe ik scroll-animaties kon maken met CSS of met GreenSock. Vervolgens ben ik zelf verschillende technieken gaan uitproberen.
Ik heb uitgezocht hoe ik een timeline kan triggeren. Dit heb ik gedaan door verschillende voorbeelden te bekijken, na te maken en aan te passen. Vervolgens heb ik zelf een code geschreven waarin ik dit heb toegepast.Ik heb ook verschillende tutorials gevolgd om nog wat meer basiskennis over ScrollMagic te leren, zodat ik niet allen de code kan gebruiken maar ook een goed idee heb van wat ik aan het doen ben.
Door verschillende codes te schrijven ontdekte ik wat wel werkt en wat niet.
Ik heb ook onderzocht en uitgeprobeerd hoe ik een element kan pinnen. Dit heb ik geleerd door een tutorial te volgen en aan de hand daarvan een code te schrijven. Vervolgens wilde ik ook dat ik een element gepint werd zodra deze aan de bovenkant van de pagina kwam. Hiervoor heb ik voorbeelden gebruikt en zelf verschillende dingen uitgeprobeerd.
Leerervaring
Je kunt soms heel lang met een probleem zitten, maar door
een expert te vragen kan het heel snel worden opgelost. Zo wist ik niet dat ik
een link naar een animatie plugin moest gebruiken om de code te laten werken.
Dit zorgde ervoor dat ik ging zoeken naar fouten in de code. Door mijn vraag op
het forum te posten kreeg ik snel antwoord op mijn vraag en heb ik veel tijd
bespaard.
Voor mij is het fijner om de scoll-animaties te maken met GreenSock in plaats van in CSS. Dit komt doordat ik hiervoor nog niet met CSS-animaties had gewerkt en de GreenSock tweens en timelines overzichtelijker zijn.
Hoe werkt dit:
Het werkt bijna hetzelfde als de CSS animatie. De enige
aanpassingen zijn:
-
Je gebruikt GEEN .setClassToggle
-
In plaats daarvan gebruik je: .setTween
-
Hierachter zet je wat je normaal ook in een
tween zet
OF je verwijst naar een
variabele waarin je een tween hebt genoemd
Elementen pinnen:
- zet de elementen in HTML in een <div id="pinElement">
- trigger de div in je ScrollMagic.Scene
- zet in je ScrollMagic.Scene een .setPin("pinElement")
Opties voor Controller en Scene
Naast duration en offset zijn er ook andere dingen die je kunt aanpassen:
- triggerHook: dit is een getal tussen de 0 en 1 waarmee bepaald wordt waar op de pagina je element wordt getrigger. In plaats van een getal kun je ook kiezen voor 'onLeave'(top van pagina), 'onCenter, en onEnter (onderkant van pagina)
- je kunt de triggerIdicators een naam, kleur ect meegeven. bv: name: 'slide scene',
- het toevoegen van een duration zorgt ervoor dat je wanneer je scrollt invloed hebt op de animatie. Je kunt dit langer en korter maken waardoor de animatie sneller of langzamer zal gaan.
Resultaat
Ik heb veel verschillende codes geschreven, waarvan sommige niet 100% werken en andere wel.
Wat is gelukt met ScrollMagic:
- het laten werken van de CSS-animatie: http://codepen.io/codesen/pen/RGpyGz
- het triggeren van een tween: http://codepen.io/codesen/pen/LRLEYZ
- het triggeren van een timeline: http://codepen.io/codesen/pen/XjZNyY
- het pinnen van elementen aan de top van de pagina: http://codepen.io/codesen/pen/pEAqgr
Extra codes:
work in progress: http://codepen.io/codesen/pen/bwogPj
Geen opmerkingen:
Een reactie posten