Omdat de man in het eerste filmpje vrij enthousiast was over Barba en dit het eerste zoekresultaat is als je Googled op ‘page transitions’, dacht ik, laat ik hiermee beginnen.
Als eerste stuitte ik op bron 1 bij het zoeken naar tutorials over Barba. Dit is een tutorial die een combinatie laat zien van Barba en Greensock. Dit ga ik zelf later testen, maar eerst focus ik me op het gedeelte dat zich bezig houdt met Barba. Daarom ben ik ongeveer hetzelfde gaan doen als de man die de tutorial geeft. Een vrij basis html site met simpele css opzetten, zodat ik hiermee mijn verschillende libraries kan testen. Hierbij kwam nog een kleine bonus dat ik nog nooit van een grid-layout gebruik had gemaakt en dat dit eigenlijk best wel fijn is. Gelijk nog weer wat geleerd.
Dus tot nu toe heb ik hetzelfde als in de tutorial, een site. Die ziet er als volgt uit:
Lekker simpel, niks bijzonders. Zo kan er weinig mis gaan dacht ik zo. Hiermee kan ik dus de hele pagina, de titel, de navigatie, en de buttons animeren als ik dat wil. Ideaal om tests mee te doen. En als je naar de tutorial kijkt, zie je dat dit hetzelfde is op de plaatsing van de navigatie en de achtergrond na. Ik heb de navigatie linkst gezet omdat ik dat zelf fijner vond wanneer ik de site inspecteerde. En de achtergrond gewoon een kleur omdat ik dit makkelijk vond.
Hoe werkt Barba? (Bron 4 t/m 6)
Veel sites tegenwoordig gebruiken Ajax om browser ervaringen te verbeteren. Dit is heel handig aangezien Ajax ervoor zorgt dat de browser niet de hele pagina opnieuw laadt. Maar daardoor kan je niet meer de terug knop van je browser gebruiken. Barba gebruikt een pushState api met Ajax (ook wel Pjax genoemd) om dit probleem op te lossen. Hierdoor gebruik je Ajax om content te uploaden en dan de browser state updaten en de url zonder browser refresh. Barba cached ook de content en maakt geen bijkomende requests aan, wanneer je op een link klikt van een pagina die je al bezocht hebt. Hierdoor verminderd de server load en reageert je webpagina sneller.
Bij Barba moet je alles wat je wil animeren in een div genaamd met id = “barba-wrapper” zetten. Bij alles wat hierin staat zal Barba de html content van de ajax call zetten wanneer je op de link klikt. Daaronder moet je een div maken met class = “barba-container”. Dit vertelt Barba dat dit element geladen moet zijn en in de barba-wrapper gestopt moet worden als je op de link van de pagina klikt. Wanneer je dit in je html hebt staan en dan op de link klikt (bv pagina 2 link), update de browser niet de hele pagina, maar alleen alles wat je in de wrapper hebt staan. Dus als je nu op de link klikt (pagina 2), zal Barba de standaard link behaviour voorkomen en gebruikt het pushState om de url te veranderen. Vervolgend maakt hij de ajax call om pagina2.html te laden. Als het geladen is, zal het alles uit de barba-container van pagina 2 gooien en het in de barba-wrapper van de huidige pagina stoppen.
Wanneer je een transition wil maken moet je altijd het ‘Barba.BaseTransition’ object toevoegen. Dit soort ervoor dat oldContainer op hide wordt gezet en newContainer word ingeladen.
Ook moet je altijd de ‘start’ function toevoegen. Deze functie word automatisch aangeroepen wanneer de transition begint. Dit is dus het beginpunt van de transition code.
Verder moet je altijd de ‘done’ functie toevoegen. Je moet deze zelf toevoegen om Barba te laten weten dat de transition klaar is.
Dan heb je ook nog oldContainer, newContainerLoading en newContainer. Het is belangrijk om te weten dat newContainer nog niet gedefinieerd is totdat newContainerLoading helemaal opgelost is.
Barba in mijn code
Wanneer ik aan de haal ging met Barba ging het mis. Ondanks dat bron 4 me goed heeft geholpen bij het begrijpen hoe Barba precies werkt, kreeg ik geen resultaat. Ik deed precies hetzelfde als de man in de tutorial (bron 4), maar ik kreeg een error. Namelijk de volgende:
Uncaught DOMException: Failed to execute ‘pushState’ on ‘History’: A history state object with URL ‘file:///Users/teunhouwers/Library/Mobile%20Documents/com~apple~CloudDocs/Saxion/Jaar%203/Creative%20Technologies/initializr2/Page02.html‘ cannot be created in a document with origin ‘null’ and URL ‘file:///Users/teunhouwers/Library/Mobile%20Documents/com~apple~CloudDocs/Saxion/Jaar%203/Creative%20Technologies/initializr2/Page03.html’.
at Object.goTo (file:///Users/teunhouwers/Library/Mobile%20Documents/com~apple~CloudDocs/Saxion/Jaar%203/Creative%20Technologies/initializr2/js/vendor/barba.min.js:1:9351)
at Object.onLinkClick (file:///Users/teunhouwers/Library/Mobile%20Documents/com~apple~CloudDocs/Saxion/Jaar%203/Creative%20Technologies/initializr2/js/vendor/barba.min.js:1:10074)
Na wat zoeken kwam ik erachter dat dit vrij diep lag. Via een paar forums kwam ik op de volgende uitleg uit:
“URL — The new history entry’s URL is given by this parameter. Note that the browser won’t attempt to load this URL after a call to pushState(), but it might attempt to load the URL later, for instance after the user restarts the browser. The new URL does not need to be absolute; if it’s relative, it’s resolved relative to the current URL. The new URL must be of the same origin as the current URL; otherwise, pushState() will throw an exception. This parameter is optional; if it isn’t specified, it’s set to the document’s current URL.”
Aangezien ik hier niet veel wijzer uit werd, heb ik de hulp ingeschakeld van een huisgenoot van me die aardig goed is in dit soort dingen. Hij wist me te vertellen dat op de een of andere manier hij weigert een request uit te voeren die ergens in barba.min.js verstopt zit. In dit bestand zit namelijk pushState. We hebben er in het document even naar gezocht, maar konden er niks vinden waar we wijzer van werden. Het zou ook gek zijn als dat bestand een fout zou bevatten. Ik heb ook nog geprobeerd het bestand in Safari te openen in plaats van Chrome. Hier kwam een soortgelijke foutmelding waarin pushState ook werd geweigerd.
Zelfs na het filmpje wat heeft uitgelegd hoe Barba te werk gaat (bron 4), vind ik het heel moeilijk om te zeggen hoe deze error ontstaan. Ik kan me niet echt een beeld vormen bij de precieze werking en waar de fout dan zit. Blijkbaar is het me niet aangeboren om zo technisch in te gaan op web codering.
Reflectie:
Barba zou het systeem moeten zijn waarmee ik mooie en soepele page transitions zou mee kunnen maken. Helaas werkt het op de een of andere manier bij mij niet. Ook kwam ik er hierbij achter dat te lang hangen bij iets veel frustraties kan opleveren. Ik heb namelijk voor mijn gevoel heel veel tijd verspilt aan het proberen op te lossen van deze error. Misschien zie je dit niet aan mijn blog af, maar dat komt omdat ik via veel forums (waar de inhoud vaak overeen komt met eenander) elke keer bij hetzelfde terecht kwam. En aangezien ik de uitleg niet begrijp en ik zelfs met de hulp van iemand die hier echt goed in is niet verder kom, denk ik dat het handiger is om verder te gaan met de andere libraries die page transitions kunnen maken.
Bronnen:
Bron 1: https://www.youtube.com/watch?v=SEFIIg9QnSw
Bron 2: https://www.youtube.com/watch?v=fvHHD7LucSs
Bron 3: http://barbajs.org/
Bron 4: https://www.youtube.com/watch?v=0Ebul67CzaQ
Bron 5: https://www.youtube.com/watch?v=gig4JNELrOg
Bron 6: https://www.youtube.com/watch?v=EApR7BCzXCk
Creative Technologies Teun Houwers 