Vooronderzoek

Om te beginnen ben ik maar gaan zoeken naar page transitions in het algemeen. Daar kwam ik deze video die een aantal sites doorloopt en inspecteert. Hij verteld dat drie pagina’s die hij bespreekt gebruik maken van Greensock animaties. Die zorgen ervoor dat de site niet zomaar in een flits naar een nieuwe url gaan, maar het ‘hijacked’ het zodat het soepel uit – en in animeert. Hij vertelt dus dat je twee functies nodig hebt: Uit animeren en in animeren (welke functies dat precies zijn, hangt af van wat voor animatie je wil) en dat je ze precies goed moet timen om het perfect te laten verlopen.

Op het eind somt hij op wat je moet doen:

• Je moet de button die je naar de volgende pagina verwijst hijacken om een default prevent te creëren op die link of element.
• Je moet een method of functie hebben die dingen uit animeert
• Je moet de visibilty of opacitiy van de volgende pagina op nul of hidden zetten
• Dan moet je het in animeren door het gebruik van een andere method of functie

Als je dit niet van scratch wil doen, kan je Barba.js gebruiken om je te helpen bij het maken van deze page transitions benoemd hij op het einde nog.

Maar Barba.js is natuurlijk niet de enige library die je kan gebruiken om soepele page tranistions te maken. Hier heb ik er nog een aantal gevonden en die kunnen me nog wel eens helpen in mijn onderzoek.