Smooth Page Transitions With Javascript Tutorial
ฝัง
- เผยแพร่เมื่อ 29 มี.ค. 2019
- Check out my courses here!
developedbyed.com
#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: github.com/Dogstudio/highway/
❤Become a patreon for exclusive videos and more!
/ dev_ed
Microphones I Use
Audio-Technica AT2020 - geni.us/Re78 (Amazon)
Deity V-Mic D3 Pro - geni.us/y0HjQbz (Amazon)
BEHRINGER Audio Interface - geni.us/AcbCpd9 (Amazon)
Camera Gear
Fujifilm X-T3 - geni.us/7IM1 (Amazon)
Fujinon XF18-55mmF2.8-4 - geni.us/sztaN (Amazon)
PC Specs
Kingston SQ500S37/480G 480GB - geni.us/s7HWm (Amazon)
Gigabyte GeForce RTX 2070 - geni.us/uRw71gN (Amazon)
AMD Ryzen 7 2700X - geni.us/NaBSC (Amazon)
Corsair Vengeance LPX 16GB - geni.us/JDqK1KK (Amazon)
ASRock B450M PRO4 - geni.us/YAtI (Amazon)
DeepCool ATX Mid Tower - geni.us/U8xJY (Amazon)
Dell Ultrasharp U2718Q 27-Inch 4K - geni.us/kXHE (Amazon)
Dell Ultra Sharp LED-Lit Monitor 25 2k - geni.us/bilekX (Amazon)
Logitech G305 - geni.us/PIjyn (Amazon)
Logitech MX Keys Advanced - geni.us/YBsCVX0 (Amazon)
DISCLAIMERS:
I am a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for us to earn fees by linking to Amazon.com and affiliated sites.
📕 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: github.com/DevEdwin/page-tran...
🛴 Follow me on:
Twitter: / deved94
Instagram: / developedbyed
Github: github.com/DevEdwin
🎵 Music:
Outro:
LAKEY INSPIRED - Me 2 (Feat. Julian Avila)
Music By: / lakeyinspired
Intro:
Dj Quads
Track Name: "Every Morning"
Music By: Dj Quads @ / aka-dj-quads
Creative Commons - Attribution-ShareAlike 3.0 Unported- CC BY-SA 3.0
creativecommons.org/licenses/b... - วิทยาศาสตร์และเทคโนโลยี
Dude no matter what you're describing, your personality is amazing man. I love it. keep moving
Positivity radiates from Ed and you can tell he's genuinely having fun!
yeah i agree - good energy from this dude, keep it rolling man
His personality is what more get me into this than content 😂 😂
its really pleasant to see a compatriot :) hello mate!
yeah he is funny
I LOVE YOU MAN!! !I SPENT DAYSSS FINDING A FREAKIN SIMPLE ROUTER!!! OMGGGG FINALYY I LOVE YOU!! !ILL SUPPORT YOU!! I WISH YOU THE BEST!!!!!
I owe TH-cam algorithm a lot for suggesting this video, I love your personality, your content...Everything about your videos in general. I just subscribed and I'm gonna binge watch your videos after that. Thank you
Thank you so much my friend! Yeah for some reason youtube is really pushing my videos, so I am really happy about that!
You had me at "Deep in the north, beyond the wall".
Dude that's what I was gonna comment ♥️
Oh man I'm so happy to find your channel it's just open my eyes to keep working on my self and learn new skills thanks man:)
You are the most likeable instructure on TH-cam. Thanks for being a real human than acting like a machine.... Awesome tuts.. Thanks
*EDIT* Nevermind! Had an issue in the beginning that you literally resolved as soon as I hit Play.
Love the videos! Very helpful to a new dev like myself.
Thanks for being awesome!
We are loving this content. Please keep making this kind of full projects🖤🖤🖤
I can’t stress how long I’ve been looking for this page transition. And ur joyful personality makes this Chanel fun to learn and watch.
Thabks for taking the time to make this! Your pace is good and you really know how to entertain.
Great content, man! Keep up with the good work you've been making. Cheers from Brazil 🙂
You are incredible. You're the first channel I've turned on Notifications so I make sure I don't miss anything. Thank you so much for being amazing and making these tutorials for us all!
It's unbelievable!!! Thx for content
This video is exactly what I was looking for, and it's explained very well. Thanks!
I am happy you are growing on TH-cam keep it up your videos are very helpful !!!
this is what I've been looking for, thanks
Thank you for these awesome videos! I love the personality, enjoyment, and knowledge you bring!
For some reason I love the way you teach
Hey man, this channel is fantastic. I'm learning a lot and you give off a really good vibe.
I think i'm in love with this man. Amazing channel, loving all videos. 😀
Incredible!!! Thanks for share this great tutorial
your vibe is just amazing! :)) not the usual tutorials for sure.
Hey Ed, great stuff bro. Much appreciation from Kenya 😀
this is awesome man. i love your design
before check this tutorial i want to thanks u bcz u done so much hardwork to learnt this . thanks .
Searched a lot of videos on page transitions and finally got an amazing one😊
This is so beautiful :( this channel deserves all subs!
This is called a real informative tutorial. Thanks, man!
You really enjoy what you do, and you show it in your videos :) Subscribed
Hi there! Thanks for this amazing practical tutorial bro! Your enthusiasm made it sound like everything is easy with the way you explain almost every line of code and giving the reasons why you're writing them and the effect they give to the pages. Makes them easier to remember. Now I'm a lot more inspired to pursue this. Keep it up!
I love you man, very helpful Tutorial. Your intros get me all the time
thank you so much for such an amazing sooth page transitions plz keep up the good work.
Seriously...
Your videos teach us so much, so fast.
It keeps me out of trouble at school and I'm also ahead of the other students.
I also recommended you to my teacher.
Thanks Brother
Just found this channel. Awesome!
And Dogstudio site is absolutely mind blowing
thanks for making this video, you did a great job balancing web designer thoughts real time with HTML,CSS as well as the main topic of the video. learned a ton from it. great personality. subscribed please make more!
Heyyy the way you teach is so amazing. Love your videos! Thaankss a ton for the great content :D
Man the way you make content is awesome, greetings from Argentina
I love the way you break down every steps by explain.
感謝Dev Ed 太厲害了！讓我更進一步。
Love this tutorials so much 😍
I'm going to learn so much from this channel. Thank you 😊🙏🏼
Greetings from Brazil!!! Your're amazing! Keep up the good work!
and here i thought i would just get to see tranaitions between sections inside one static html page.
this is a great video, learned a lot.
subscribed, nuff said.
Love the setup brief.👍
I came for the tuts, stayed because your vibe. Thanks!
omg. its sooooo beautifull man
Thank you very much for your tutorial. A lot of fun to follow you !!
that intro was the smoothest thing 👌👌
Great tutorial. There were few things here and there that I had to google (like depreciated gsap methods) but it worked out great. Thanks Ed!
This video helped me a loooottt!! Thank you so much. Your videos are amazing 🤩
you are so lively , please keep posting such awesome tutorial
Man, where have you been? I love your content and all tutorials. Nice work. Subscribing...
Haha thank you!
We are proud of you!
You're the best Front End Dev Ever
You made my day men I learned too many things today ❤❤
This channel is priceless. you sir, are a great teacher.
This is AMAZIIIIIING ! 2 days ago I said, my workflow right now is decent, I like this :), and the I watched this video and said WHAT !!! I'm on another level Now ! Thank you brother !
Dev Ed This is all your enthusiasm that shows how extremely you work hard for us😍
Nice content. Subscribed to your channel earlier. Love the new set up.
Absolute, you make great this job
Thanks so much Ed. I love this
Awesome effect!!! Congrats.
Your work here is amazing :’) so positive, pretty and bright
please keep making videos.... i am learning so much from them
Keep up the great work! you are awesome :)
Thank you so much it helped me a super lot in my portfolio
Glad i found this channel! I will make my mom proud lol
dude you are awesome. thanks for the tutorials 👍
I've just met you (that's my first video) and you got a new subscriber! Wonderful job. Keep going!
Same, i thought if he makes vids like this he would have 100k plus, but no m8
awesome dude keep up the good tutorials!
I have so many good ones planned up!
the way you initiate the video is beyond awesome! keep posting! lots of love from a female developer from india..!
Dude you are just an amazing instructor 👩🏫
Your just funny and exciting in your own way. I love you're personality and that's why I subscribed to your channel.
This is so great! thank you.
Hi! Dev Ed this is awesome animation Your way of explanation was so clear.
Bhai tutorial smjh nhi aya 😓
Keep it coming 😀
5 seconds after the video, omg I dont mind I have to listen for a while to learn , what a cool guy you are, greetings from colombia
Great video!
Good work thanks for sharing
nice content bois, keep it up, subscribed
Thanks a lot/ Its a superusefull for me now!
Your channel is very informative and you make me very happy 🍕
amazing video from amazing person!
your content is amazing
This is amazing! Can you please do a tutorial on page transition using react-router pleaseeee
U bro.. I don't have words to describe you.. you just make me smile everytime u start the video..
i've searched for this about 2years ago and couldn't got any answer but now you show the way... thank you 😭😭😭😭😭👍👍👍 i'm so mucg beginner that i'm not familiar with using Terminal&node js ..however i'm gonna try this!! Thank you!!!♥♥
Awsome man
i dont regret subscribing your channel...your have a good n happy vibe...keep going...we are here to support you😊...n bdw i wanted to do that pagination too...but didnt work out well🤣
I really love your content
Love the way you make video
damn dude I love your attitude 😂 Ur really so friendly not a boring teacher at all in every intro i can't resist pausing da video (or sometimes leave it running lol) and go smash dat like thumb 👍♥️😂
Hi there it`s really awesome effect. thanks your priceless efforts.
Doesn't matter html javascript or anything. Your good energy enough for us
Thank you, you are so good!
Thank you for the content! I swear - if you did a limited class size of a 2x a week or so live coding seminar where we can do Q&A with the live comments and have some individual time like 10mins a week consulting to individually gear us towards our personal coding goals I'd sign up. I did this with a ForEx (foregin exchange) and Technical Analysis Stock trading class & it was one of the best experiences. I felt like I engaged with a community of like minded people and learned better because it was a great environment for newbies.
Thanks a lot JS Ninja! x
Great work bro
Awesome tutorial! Doesn't help much my crisis on wanting to go for full front-end development - it's so much fun >.
this is a real complet program fron 0. tks a lot @DevEd