Smooth Page Transitions With Javascript Tutorial




#pagetransitions #web development #javascript

Today we are going to build out a website and adding smooth page transitions using javascript. We are going to use highway.js to create the page transitions between the html pages and gsap to add animations.

Since this page transition library uses modern ES6 we are also going to cover parcel to bundle everything up together for us.

Check out HighwayJs: https://github.com/Dogstudio/highway/

❤Become a patreon for exclusive videos and more!
https://www.patreon.com/dev_ed

📕 Things covered in this video:

– How to create smooth page transitions
– Learn to use highway.js for page transitions
– How to add animations to our page transitions with gsap
– Bundling everything with Parcel.js

📔 Materials used in this video:

Starter Files: https://github.com/DevEdwin/page-transitions-js

🛴 Follow me on:

Twitter: https://twitter.com/deved94
Instagram: https://www.instagram.com/developedbyed/
Github: https://github.com/DevEdwin

🎵 Music:

Outro:
LAKEY INSPIRED – Me 2 (Feat. Julian Avila)
Music By: https://soundcloud.com/lakeyinspired

Intro:
Dj Quads
Track Name: “Every Morning”
Music By: Dj Quads @ https://soundcloud.com/aka-dj-quads

Creative Commons — Attribution-ShareAlike 3.0 Unported— CC BY-SA 3.0
http://creativecommons.org/licenses/b…

Original source


29 responses to “Smooth Page Transitions With Javascript Tutorial”

  1. High level explanation of what I gathered from literally skimming through the video for about 10 seconds.
    Put pages in containers, give pages an enter animation that calls a function when that animation is done. Create a router to load new pages in above the current page and listens for done callback. When the callback is received the router can drop the old page.

    Looks like you're using a framework called highway to do this but I think that's the basic concept.

Leave a Reply