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!
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 :)
Can u help me with my problem. When im the homepage then i click on home, the transition effect does occur but then its stuck on black screen and also another problem is that when in home page then clicked on to services which is 3rd in the nav it turns black screen also and it doesnt show anything after the transition.
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?
Hi sir i integrated this on my page but then i encountered one problem. I have this facebook icon with href to my fb page and when i click on that icon it only shows the transition it doesnt proceed to my fb page. Any tips on what to change with the .js file? Thank you
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.
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.
Hi sir i integrated this on my page but then i encountered one problem. I have this facebook icon with href to my fb page and when i click on that icon it only shows the transition it doesnt proceed to my fb page. Any tips on what to change with the .js file? Thank you
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 ?
Hi, this works well thank you very much. Do you know how I can prevent this animation from occurring on initial page load of the site and instead only happen after I load the home page?
Thank you for this! So much easier than barba, been fighting with that for two days now, and then I came to this video. But... Is it possible NOT to have the transition when you visit the home page for the first time?
You're so welcome! I'm not 100% sure without testing, you could use a cookie to test if they have landed on the page for the first time or not but I haven't messed around with it.
Hey, i have a question that transition and transition-2 BOTH have transition-duration of .5s but 1st one happens then another HOW?why they won't haooen at same time PLEASE SOLVE THIS
Hi sir i integrated this on my page but then i encountered one problem. I have this facebook icon with href to my fb page and when i click on that icon it only shows the transition it doesnt proceed to my fb page. Any tips on what to change with the .js file? Thank you
i know this is a year late but i'm having the same issue as well, this only happens to elements that have children. super weird, couldnt find a fix, did you?
Hey Tyler I followed your tutorial here but unfortunately my page is not fading in into the page we're loading in, its a quick snap instead. So when I load my page1, it has the nice fade in animation. then, when I navigate to page2 from page1, it has the nice fade out but then it snaps into page2 after rather than fading into page2. any pointers?
Bro maybe you could help. You see i have this homepage and used this tutorial, then when i click on other nav buttons it does it job. But why is when im for example on the homepage then i click home button it just does the animation then doesnt show anything after.
@@krisilyubenov2372 Make sure the script is after the div with the class, and, use this instead: $(window).on("load", FadeTransition()); function FadeTransition() { const transition_el = document.querySelector('.transition'); setTimeout(() => { transition_el.classList.remove('is-active'); }, 500);
yeah this one cool,,,,,,,,,, but need to improve a little ,,, contents already loaded between transition that's not cool ,, content should be load after transition end ,,,,,,,,,
What? No content should definitely be loaded in-between else what's the point of the transition? Isn't the point to use a transition to mask the loading times?
Bro maybe you could help. You see i have this homepage and used this tutorial, then when i click on other nav buttons it does it job. But why is when im for example on the homepage then i click home button it just does the animation then doesnt show anything after.
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!
Thank you so much for this! I was searching for anyone who used pure JS only but found none... Really appreciate your help! 😃
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 :)
Glad it helped! Thanks for the sub!
Can u help me with my problem. When im the homepage then i click on home, the transition effect does occur but then its stuck on black screen and also another problem is that when in home page then clicked on to services which is 3rd in the nav it turns black screen also and it doesnt show anything after the transition.
Me watching this in 2024 and I'm so glad I came across it... I'm def implementing this... Bless you mate ❣️
Thank you so much for showing page transitions with vanilla JavaScript!
You're welcome Gavin!
Bro why is that when im on homepage then i click home it does the animation then shows a blank screen.
I was looking for a vanilla JS page transition, great tutorial.
Awesome, thank you!
Awesome! Just what i expecting.
Thanks a lot man!
Glad you liked it!
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!
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?
Thank yoU! This has helped me so much on my journey! Thank you!
Thank you, now I don't have to use all of those external library for a simple page transitions. +1 sub for you.
nice, exactly what I needed
fantastic!!! i've tried barba js and swup and isn't working properly but this is AWESOME!!! thank you
Looks simpler than use a library like barba.js, greetings from Mexico.
Thank you! Cheers!
Hi sir i integrated this on my page but then i encountered one problem. I have this facebook icon with href to my fb page and when i click on that icon it only shows the transition it doesnt proceed to my fb page. Any tips on what to change with the .js file? Thank you
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?
omg I love your new channel pic
Thanks had it especially made for me; 😂
@@TylerPotts awesome
How would I add key frames to the animation? Please respond.
need more videos on this topic,,,,,,
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.
Hi! Did you create the advanced transition video??? If not, I am looking forward to it! This has been so helpful! Thanks!!!
thanks braza :)
You're welcome 😊
What is the theme you are using?
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.
Hi sir i integrated this on my page but then i encountered one problem. I have this facebook icon with href to my fb page and when i click on that icon it only shows the transition it doesnt proceed to my fb page. Any tips on what to change with the .js file? Thank you
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 ?
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?
Hi, this works well thank you very much. Do you know how I can prevent this animation from occurring on initial page load of the site and instead only happen after I load the home page?
Thank you so much!
Thank you for this! So much easier than barba, been fighting with that for two days now, and then I came to this video. But... Is it possible NOT to have the transition when you visit the home page for the first time?
You're so welcome! I'm not 100% sure without testing, you could use a cookie to test if they have landed on the page for the first time or not but I haven't messed around with it.
@@TylerPotts I don't know if sessionStorage is a cookie, but it works (almost) perfect! Thank you again for making something complicated so simple
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
what color theme are you using in this video, it looks great! I'm using night owl right now
SynthWave 84
Hey, i have a question that transition and transition-2 BOTH have transition-duration of .5s but 1st one happens then another HOW?why they won't haooen at same time
PLEASE SOLVE THIS
Thx!
No problem!
Hi sir i integrated this on my page but then i encountered one problem. I have this facebook icon with href to my fb page and when i click on that icon it only shows the transition it doesnt proceed to my fb page. Any tips on what to change with the .js file? Thank you
Hi! I'm getting some errors when clicking on certain links. It directs me to a undefined page.. How can I fix this? Thanks!
i know this is a year late but i'm having the same issue as well, this only happens to elements that have children. super weird, couldnt find a fix, did you?
Hey Tyler I followed your tutorial here but unfortunately my page is not fading in into the page we're loading in, its a quick snap instead. So when I load my page1, it has the nice fade in animation. then, when I navigate to page2 from page1, it has the nice fade out but then it snaps into page2 after rather than fading into page2. any pointers?
Nevermind! I realized my mistake. thanks for the great video.
Haha, happy you solved it! Sorry for the late reply been away for the Christmas period :)
Bro maybe you could help. You see i have this homepage and used this tutorial, then when i click on other nav buttons it does it job. But why is when im for example on the homepage then i click home button it just does the animation then doesnt show anything after.
@@thatdiglettfan7949 How did you fix it?
When I press on Home it makes everything go black
thanks
Cannot read property classList of null
Same here
@@krisilyubenov2372
Make sure the script is after the div with the class, and, use this instead:
$(window).on("load", FadeTransition());
function FadeTransition() {
const transition_el = document.querySelector('.transition');
setTimeout(() => {
transition_el.classList.remove('is-active');
}, 500);
}
Which vs code theme do you use?
SynthWave84
@@TylerPotts Thanks! 😁
yeah this one cool,,,,,,,,,, but need to improve a little ,,, contents already loaded between transition that's not cool ,, content should be load after transition end ,,,,,,,,,
What? No content should definitely be loaded in-between else what's the point of the transition? Isn't the point to use a transition to mask the loading times?
@@TylerPotts yeah like content should loads gradually in WOW.Js same like this after endpoint of transitions,,,,,,,,
Bro maybe you could help. You see i have this homepage and used this tutorial, then when i click on other nav buttons it does it job. But why is when im for example on the homepage then i click home button it just does the animation then doesnt show anything after.
Hi, how can I make the loader go across the page from left to right?