Page Transitions with JavaScript & CSS For Beginners

Learn how to transition between web pages using basic javascript and css. We use generic CSS animations / transitions mixed with the power of vanilla javascript to create cool, fade and slide animations between pages!!

// MY GEAR FOR CODING AND YOUTUBE

All of these products I own and have tested!

// FOLLOW ME ON TWITTER

// INTERESTED IN GAME DEV?

// CHECK OUT MY GAME

// SUPPORT MY GRIND

// DO THESE SIMPLE STEPS
LIKE, SUBSCRIBE & SHARE

[Atarian]

This is the ONLY guide which really shows what it promises. No importing of obscure JavaScript libraries and them showing how to edit the parameters. This really explains how to do the transition in JS. Thank you!

[derraindesilva]

Thank you so much for this! I was searching for anyone who used pure JS only but found none... Really appreciate your help! 😃

[michaelojebola]

Me watching this in 2024 and I'm so glad I came across it... I'm def implementing this... Bless you mate ❣️

[gavinputterill]

Thank you so much for showing page transitions with vanilla JavaScript!

[aldrinbright]

I was looking for a vanilla JS page transition, great tutorial.

[WholeOfEngland]

Hey just wanted to say this is such a good tutorial! I'm primarily a backend developer, so most of the tutorials using libraries I've never heard of I was finding hard to implement, but this has to be the simplest method I've found on this site, you've gained a new sub :)

[kunoichikun]

Thank you for this tutorial! Super helpful! Just started learning html, css and js and your explanation of js was super easy to follow and understand!

[hunterholthaus]

This is a great no-plugin solution, thanks! Is there any way to target more than one class in the js so multiple elements can animate at once instead of just the one main transition element?

[imgodly]

Thank yoU! This has helped me so much on my journey! Thank you!

[songohan]

Awesome! Just what i expecting.
Thanks a lot man!

[sudoker]

Thank you, now I don't have to use all of those external library for a simple page transitions. +1 sub for you.

[Atarian]

Just one small correction: The transition time 0.5s in css has nothing to do with the timeout 500ms in javascript at window.onload. Those two values don't need to match. I would even say that you don't need to put the timeout in javascript at all when the page loads up. It is only needed in the eventListeners when you click the anchor in order to "wait" for the transition to finish before leaving the page.

[davehere]

Question what if i want to have more then one transition called out in the same html. it only animates the one the other stays stagnate. any fix?

[_moxy]

fantastic!!! i've tried barba js and swup and isn't working properly but this is AWESOME!!! thank you <3

[aditiyaah]

Thank you for the lesson, but I got issue when try it in my framework (in my case I using django) when animate fade out is doing the url is not take a target perfectly from anchor tag, cause we using preventDefault for acnhor, the 'anchor' tag doesn't allow any other tags in it (in my case using span). But I solve it by using css logic, when anchor is clicked (::active) the tag iside achor will visibilty 0. It's work but I think this not perfectly way for solve the issue. Do you have any suggestions ?

[cmnweb]

Looks simpler than use a library like barba.js, greetings from Mexico.

[joykennedy]

How would I add key frames to the animation? Please respond.

[cesarsilva]

Great video! Really helped me a lot! I would like to ask, if I wanted to specify the transition only for some anchors (and there are more link within the page), what would be the best way to do it? I tried creating a class and put 'a.someclass' in the querySelectorAll, but it doesn't work.

[ivansibinovic]

Thanks for the awesome video. I have the anchor tags inside of the main tag but they are not working. What can be done to overcome this?

[johnneriesapiera]

Hi i love your transition but i have a question, I think there is an event error when you try to click buttons with href instead of the navbar only