#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”
Hello there my gorgeous friends on the internet
Your speech is wonderful. Thank you for this. But what about this kinda transition on the same page. I want my contents transitioning in and out on scroll down and up
Beyond the wall??? Don't you dare go there bro LOoooooool
Did not get ?? 😓😓
I have an error when running "parcel index. html" please help.
Thanks in advance
Чувак! Ты нереально крутой !
Back button doesnt properly remove viewers. Can anyone help? :c
I always watch these types of videos, but I never know if I can apply these things to frameworks like React. Can someone answer my extremely noob level question.
Why everytime i see times new roman font, my eyes bleed?
Where are you from? I think I hear an accent 😀
Really loved this tutorial, are those pages responsive Ed?
Dev , It is posible to do it in react ? xD I'm still trying…
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.
Your just funny and exciting in your own way. I love you're personality and that's why I subscribed to your channel.
I need help with installing the packages at the start of the video
Thank you, you are so good!
awesome vidoe 👍
hlo bro which web-side are used in for backgroung are download
Hi sir i really like your videos its really helpful for me. Thank you!
Imagine how cringe it would be if someone put a javascript file on a <link> element LOL
Great video! I learn so much from this channel 🙂
Is there a similar way to do this in a different view engine like hbs?
Hi…I just want to know that it would work properly if we use yarn…btw your videos are great and inspiring for a student like me
Great video…!!!
But in my case i got error "parcel : command not found"
Hey can you teach me, how to make ilustration svg for website
Thabks for taking the time to make this! Your pace is good and you really know how to entertain.
Thumbs down for the mother comment
Hi dude I got this error at the beginning lol
https://ibb.co/CWfQvTv
Hey, could you please post the js file?
your tab is too long, the official recommendation for html is a tab of 2 spaces