Smooth Page Transitions With Javascript Tutorial

Рет қаралды 868,738

5 жыл бұрын

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...

Пікірлер: 703

@alirezabagherpourshirazi6782 5 жыл бұрын

Dude no matter what you're describing, your personality is amazing man. I love it. keep moving

@theamjolnir9641 5 жыл бұрын

Positivity radiates from Ed and you can tell he's genuinely having fun!

@bluemagicuk 5 жыл бұрын

yeah i agree - good energy from this dude, keep it rolling man

@thangtea18bec 5 жыл бұрын

His personality is what more get me into this than content 😂 😂

@MohsenFarajYT 4 жыл бұрын

its really pleasant to see a compatriot :) hello mate!

@techmasterzack-yt6521 3 жыл бұрын

yeah he is funny

@wadehosking4446 5 жыл бұрын

You had me at "Deep in the north, beyond the wall".

@malhar-ansingkar 3 жыл бұрын

Dude that's what I was gonna comment ♥️

@tallitvak1149 5 жыл бұрын

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!!!!!

@faissalabsml4393 5 жыл бұрын

I owe KZfaq 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

@developedbyed 5 жыл бұрын

Thank you so much my friend! Yeah for some reason youtube is really pushing my videos, so I am really happy about that!

@freevoice8099 5 жыл бұрын

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:)

@bigfoot131 4 жыл бұрын

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.

@dustincintron1682 5 жыл бұрын

*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!

@mr.developer2480 5 жыл бұрын

You are the most likeable instructure on KZfaq. Thanks for being a real human than acting like a machine.... Awesome tuts.. Thanks

@thisisgsrana 5 жыл бұрын

We are loving this content. Please keep making this kind of full projects🖤🖤🖤

@Dawntech 5 жыл бұрын

Great content, man! Keep up with the good work you've been making. Cheers from Brazil 🙂

@RyanReevesNompton 5 жыл бұрын

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!

@no2475 4 жыл бұрын

This video is exactly what I was looking for, and it's explained very well. Thanks!

@extremespartan117 4 жыл бұрын

Thabks for taking the time to make this! Your pace is good and you really know how to entertain.

@renanfernandes2717 3 жыл бұрын

I came for the tuts, stayed because your vibe. Thanks!

@matthenley6704 5 жыл бұрын

Thank you for these awesome videos! I love the personality, enjoyment, and knowledge you bring!

@royhanreza1807 5 жыл бұрын

this is what I've been looking for, thanks

@gurvirsingh1051 5 жыл бұрын

I am happy you are growing on KZfaq keep it up your videos are very helpful !!!

@nickmaxwellambient6615 5 жыл бұрын

Hey man, this channel is fantastic. I'm learning a lot and you give off a really good vibe.

@debotos 5 жыл бұрын

This is called a real informative tutorial. Thanks, man!

@rajarshimandal3235 4 жыл бұрын

Searched a lot of videos on page transitions and finally got an amazing one😊

@robertbalassan 2 жыл бұрын

your vibe is just amazing! :)) not the usual tutorials for sure.

@brunocarvalho287 5 жыл бұрын

Incredible!!! Thanks for share this great tutorial

@edisvelicanin8854 5 жыл бұрын

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.

@Dnipro1_pole_mriy 5 жыл бұрын

It's unbelievable!!! Thx for content

@MrSnowmobilefreak 5 жыл бұрын

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!

@ashisharora9694 5 жыл бұрын

before check this tutorial i want to thanks u bcz u done so much hardwork to learnt this . thanks .

@santiagomamani6111 4 жыл бұрын

I think i'm in love with this man. Amazing channel, loving all videos. 😀

@truthlee6423 4 жыл бұрын

I love the way you break down every steps by explain.

@epiphanmushahwar6671 5 жыл бұрын

that intro was the smoothest thing 👌👌

@BADDRICK95 4 жыл бұрын

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

@justicetowett5083 4 жыл бұрын

Hey Ed, great stuff bro. Much appreciation from Kenya 😀

@south._g 4 жыл бұрын

I'm going to learn so much from this channel. Thank you 😊🙏🏼

@leonardocoronel8108 5 жыл бұрын

Man the way you make content is awesome, greetings from Argentina

@chukwudaluayika8324 3 жыл бұрын

I love you man, very helpful Tutorial. Your intros get me all the time

@prerakhere 5 жыл бұрын

Glad i found this channel! I will make my mom proud lol

@webdesigner5770 4 жыл бұрын

thank you so much for such an amazing sooth page transitions plz keep up the good work.

@akshithhiremath1714 5 жыл бұрын

You really enjoy what you do, and you show it in your videos :) Subscribed

@josuearreola9998 3 жыл бұрын

This is so beautiful :( this channel deserves all subs!

@baliyachtservices7505 3 жыл бұрын

Just found this channel. Awesome! And Dogstudio site is absolutely mind blowing

@yodkwtf 2 жыл бұрын

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!

@span8898 5 жыл бұрын

Thank you very much for your tutorial. A lot of fun to follow you !!

@TrictoYT 4 жыл бұрын

For some reason I love the way you teach

@diegorocha2186 5 жыл бұрын

Greetings from Brazil!!! Your're amazing! Keep up the good work!

@yogenp 5 жыл бұрын

Nice content. Subscribed to your channel earlier. Love the new set up.

@aldrinbagayana7643 5 жыл бұрын

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!

@shreyapai5615 4 жыл бұрын

Heyyy the way you teach is so amazing. Love your videos! Thaankss a ton for the great content :D

@CodeGround 3 жыл бұрын

this is awesome man. i love your design

@gabrielamoncayozerga2214 5 жыл бұрын

Love this tutorials so much 😍

@aybak3k 3 жыл бұрын

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 👍♥️😂

@itsshopboy 5 жыл бұрын

Thanks so much Ed. I love this

@kohinoorcreations4931 4 жыл бұрын

you are so lively , please keep posting such awesome tutorial

@chrismarcos116 5 жыл бұрын

please keep making videos.... i am learning so much from them

@jkjk354 5 жыл бұрын

This channel is priceless. you sir, are a great teacher.

@itzshayne_ 4 жыл бұрын

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 !

@sayanbanerjee1047 5 жыл бұрын

the way you initiate the video is beyond awesome! keep posting! lots of love from a female developer from india..!

@joaoferreira_yt 5 жыл бұрын

I've just met you (that's my first video) and you got a new subscriber! Wonderful job. Keep going!

@eperou6299 5 жыл бұрын

Same, i thought if he makes vids like this he would have 100k plus, but no m8

@Zl.3087 3 жыл бұрын

This video helped me a loooottt!! Thank you so much. Your videos are amazing 🤩

@vinaykotturi1283 5 жыл бұрын

Hi! Dev Ed this is awesome animation Your way of explanation was so clear.

@toxicgamerzrk 4 жыл бұрын

Bhai tutorial smjh nhi aya 😓

@eliphinobeats 5 жыл бұрын

This is so great! thank you.

@oliviadart612 4 жыл бұрын

Your work here is amazing :’) so positive, pretty and bright

@ilan117 5 жыл бұрын

dude you are awesome. thanks for the tutorials 👍

@aswinganji7870 3 жыл бұрын

Thank you so much it helped me a super lot in my portfolio

@andresteacher8325 3 жыл бұрын

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

@zainqureshi7596 4 жыл бұрын

Dev Ed This is all your enthusiasm that shows how extremely you work hard for us😍

@kjyhh 3 жыл бұрын

Love the setup brief.👍

@Jakhongir84 5 жыл бұрын

Man, where have you been? I love your content and all tutorials. Nice work. Subscribing...

@developedbyed 5 жыл бұрын

Haha thank you!

@aykhanrh 5 жыл бұрын

omg. its sooooo beautifull man

@dpffpself 4 жыл бұрын

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!!!♥♥

@ViniciusPrado 5 жыл бұрын

Awesome effect!!! Congrats.

@bonniechang1377 5 жыл бұрын

感謝Dev Ed 太厲害了！讓我更進一步。

@trantienducanh3944 4 жыл бұрын

You're the best Front End Dev Ever

@rpaju0451 2 жыл бұрын

You made my day men I learned too many things today ❤❤

@wisdombright9821 4 жыл бұрын

Your just funny and exciting in your own way. I love you're personality and that's why I subscribed to your channel.

@Spartan_Mindset_World 5 жыл бұрын

Use: npm init -y Instead of pressing enter 60 times

@developedbyed 5 жыл бұрын

uuu great tip! Thanks!

@Spartan_Mindset_World 5 жыл бұрын

@@developedbyed You're welcom. And i really like your tutorials by the way , big up ❤

@pengekcs 5 жыл бұрын

better yet, use pnpm (same as npm but with the added benefit of much faster working + much less storage space used. pnpm / pnpmx. First install it by npm install -g pnpm then go!)

@zulzdn9348 4 жыл бұрын

@@pengekcs complicated

@svnbit8408 4 жыл бұрын

Can this be used without a front end stack? So new to js and want to use it, but I'm not comfortable with all that stuff. Would like to eventually use on WordPress but just a static site for now would be good.barba js vs docs suck and I've seen no content on KZfaq for it. Your thoughts, pullleaze !! Thanks !

@PS-le4mf 5 жыл бұрын

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.

@adityashirodkar4568 4 жыл бұрын

U bro.. I don't have words to describe you.. you just make me smile everytime u start the video..

@latikawagh926 3 жыл бұрын

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🤣

@dimitrisKarakwttas 4 жыл бұрын

Keep up the great work! you are awesome :)

@ademuysal3572 5 жыл бұрын

Doesn't matter html javascript or anything. Your good energy enough for us

@anuragchaurasia263 4 жыл бұрын

Dude you are just an amazing instructor 👩‍🏫

@ZiIIous 5 жыл бұрын

I like your positive attitude(is that what it's called?). The brightness of your aura empowered me. You made me feel like a loser. Before improving my knowledge, I have to improve as a person to get accepted, I guess... force a smile...force a smile....I can do it

@ruichiwu7198 4 жыл бұрын

Thank you, you are so good!

@xsilence8219 5 жыл бұрын

I really love your content

@resalith 3 жыл бұрын

Awesome tutorial! Doesn't help much my crisis on wanting to go for full front-end development - it's so much fun >.

@RajeshKumar-uw9qi 5 жыл бұрын

Hi there it`s really awesome effect. thanks your priceless efforts.

@amiraadediran9813 4 жыл бұрын

This is amazing! Can you please do a tutorial on page transition using react-router pleaseeee

@rossthemusicandguitarteacher 5 жыл бұрын

Thanks for this 😁

@heinmin3903 5 жыл бұрын

awesome tutorial. Thanks for sharing valuable one. That is really awesome what i have ever seen. Thanks you so much i m waiting your next video.

@chrisdanikas7918 5 жыл бұрын

awesome dude keep up the good tutorials!

@developedbyed 5 жыл бұрын

I have so many good ones planned up!

@matfen7978 5 жыл бұрын

Your channel is very informative and you make me very happy 🍕

@anuraghazra4772 5 жыл бұрын

Very emotional intro 😊❤

@kakarnyori5457 3 жыл бұрын

We are proud of you!

@adamtomczyk235 5 жыл бұрын

Thanks a lot JS Ninja! x

@aresfrt 3 жыл бұрын

Absolute, you make great this job

@shahariarhossain6134 5 жыл бұрын

Great work bro

@dheflowgeming 5 жыл бұрын

nice content bois, keep it up, subscribed

@srikanthd3527 5 жыл бұрын

thanks a lot, very nice tutorial to learn

@priyaranjanmantri9332 5 жыл бұрын

This is very useful for me.

@ziuhoque1532 5 жыл бұрын

make this type of small project video all time keep it up

@patnaikkaur2026 5 жыл бұрын

It's really awesome bro Can u plss do the nxt video on page reveal transitions using js