How to Webflow: Page transitions - Tutorial (2019)

In this tutorial, I'll show you how to add page transitions on your site. It requires a bit of coding and Webflow interactions.
#webflow #webdesign #tutorial
Here's the code:
$('').click(function (e) {
e.preventDefault();
var goTo = this.getAttribute("href");
setTimeout(function(){
window.location = goTo;
},1000);
});
Join the Pixel Geek Community:
pixelgeek.community
-------
I've been a web designer since 1995 and I've learned a lot about this industry. Now that I've found my dream job at Webflow, I want to share some of my experiences and knowledge with you in hopes you can find your dream job as well.
The purpose for this channel is to help you design and build better websites, learn more about the business of web design, and empower you to inspire others in this unique creative industry.
-------
Like what you see? Subscribe here:
kzbin.info_...
-------
/ thepixelgeek
/ pxlgk
pxlgk.com

[@lalalotteh]

O MY GOD THIS IS LIFECHANGING REALLY, THANK YOU

[@gagestillalive]

Nelson your tutorials are always so helpful, was able to make some killer CMS Project transitions after watching this! Thank you!

[@pixelgeek]

you're welcome. Glad to have helped 😁

[@vagifmammadov8946]

Thank you so much, man! Really helped me with this video.

[@pixelgeek]

Glad it helped!

[@StefanPoulos]

This is so helpful, thank you Nelson! It's cool that it works with combo classes also. I added a "page-transition" combo class to other things like header logo, buttons, etc and it works great.

[@pixelgeek]

glad to have helped :)

[@akilorosky]

Hey Stefan! I'm trying to add the transition with combo classes but its not quite working out for me - How did you get yours to work? any help will be much appreciated ! Thanks EDIT: I just figured it out. It might help someone who's doing it how I did it. It is a long method and there's probably better ways to do it but this is what works for me 1. After making the transition in webflow i set a class called "transition" which i then added as a combo to all elements I wanted to trigger the page transition. I also used "transition" as the class for jQuery to target. 2. I then made a button (it could be any element really) and added the "transition" class to it and then set it to display none. 3. I set that "transition" element I made as a trigger and chose the option to affect all elements with this class in the interactions panel. 4. After publishing , all elements that have the class "transition" or have a combo class with "transition" included will trigger the animation. Hope that helps!

[@luciddoggo5094]

@@akilorosky Thank you man you dont know how much that helped for my school project.

[@akilorosky]

​@@luciddoggo5094Happy to help! I can't even count the number of times I've been saved by something I learned on here

[@prmade787]

Pretty awesome and simple. Thanks, Nelson.

[@pixelgeek]

Thanks for watching 😁🙇🏽‍♂️

[@JoshuaKMedia]

What is you and your wife's favorite restaurant to eat at? You deserve a night out for making everyone else's life a little easier. Thank you Nelson.

[@pixelgeek]

awww thanks for the offer. :) Instead of feeding us, I would strongly suggest sending that money to this charity: donate.wck.org/give/236738/#!/donation/checkout

[@aaronbobby3819]

I know I am kinda off topic but do anyone know of a good place to stream new tv shows online?

[@grahamkameron3248]

@Aaron Bobby Lately I have been using Flixzone. Just google for it :)

[@damiantommy8966]

@Graham Kameron yup, have been watching on Flixzone for years myself :D

[@aaronbobby3819]

@Graham Kameron Thanks, I signed up and it seems like a nice service :D Appreciate it!

[@wadood1299]

Awesome tutorial!!! 👍👍👍

[@RalucaM]

Hah! Perfect timing for this video. I made a transition like this but it was jarring. I'll try with custom code too.

[@pixelgeek]

Glad to have helped :)

[@dunkTheFunk]

Thansk Nelson, that video was really helpful.

[@pixelgeek]

You're welcome!

[@niccohirajeta]

Thanks Nelson! I had the hardest time trying to figure out why on page load, the "overlay" would flicker away and then play out. I'd recommend setting your Fixed position to FULL instead of TOP. Doing this fixed it for me!

[@pixelgeek]

can you post your read-only link? I'll look into it.

[@KonstantinosPenlidis]

Works great, thanks!

[@pixelgeek]

Glad it worked out for you

[@KonstantinosPenlidis]

@@pixelgeek hey, that's a far fetch question, but have you ever had some links not triggering the transition, when in the mobile breakpoint? This is what happens to me and can't fix it whatever I tried :/

[@marvin..m]

Great tutorial, as always! Can you possibly do a similar tutorial with one page fading into the next? Not having any coding experience, and I’m sure many other Webflowers are in the same boat, I don’t know how to adapt this particular configuration to what I need. I think you piggy-backed a fade transition with a window-shade one in an older video but I can’t seem to find it. Or, if not, could you please post a link to the older video? Much appreciated.

[@deluxestockholm6123]

Thank you :)

[@thewebart]

Thank you very much.

[@pixelgeek]

my pleasure :) Thanks for watching

[@MyDistortedWorld]

Nice one Nelson!!!

[@pixelgeek]

Thanks 😁👍🙇🏽‍♂️

[@jlitzphotography1805]

@pixelgeek hi Nelson, thank you so much for the tutorial. I am having issues with it though, the outro doesn't seem to play and the jquery code displays on the page after clicked. Any thoughts?

[@sven-erikslattedalen7302]

Hi Nelson. This is awesome! Thank you! A quick question for you. Is it possible to do this page transition using scroll, instead of click? I've made a zoom in scroll interaction for a Hero section, but when the zooming is done, I would like to have a smooth page transition. Do you have any advice for me on this? Can I use the same code as you did, just click(function (e) with scroll(function (e)?

[@nicoeiben4272]

Thank you so much for this nice tutorial. Works great on my site. The only thing that is bothering me is when I go back in browser after clicking to the next nav-link it leads me back to the full size transition and I would have to click two times back to get to where I was. Any ideas how this can be solved?

[@watsonbarry5666]

Thanks Nelson, I love your tutorials! I have a question though. I have 5 pages on my site, and after publishing the 'load out' animation only plays for the first pages, but then stops after that. This creates a jarring experience since only the 'page load' animation plays from that point. Any suggestions on how to fix it? It's so frustrating since it works initially, but then stops.

[@Tenacitae]

Hey there, first of all thank you for this tutorial and many others. I'm very grateful and it's been helping me tremendously. This transition tutorial seems to work well on all browser except on Safari/iPhones (iPhone 8 Plus). The javascript seems to work as there is a pause before the next page load. But the transition that's suppose to happen once a button is clicked doesn't happen. Any ideas...?

[@alexlakas1]

This is awesome, really appreciate the video! Has anyone else had issues with flickering custom cursors when using page transitions?

[@techstar4775]

Thanks myman! :D

[@pixelgeek]

My pleasure 😁👍

[@laurend7624]

Thank you SO much, I needed this!! The only thing is the code is visible at the footer of my published site? How do I hide this?

[@samueljaramillo7144]

what if you have a subclass, do you have to specifiy that in the code? thanks Nelson you rock!

[@jan6743]

Hi, could you create a tutorial with lottie page transitions on animated pages? There is a tutorial on the webflow forum, but I think it only works on static pages.

[@goncalobranco]

I did exactly this and it's working perfectly but I found a bug with this code. Apparently, when you hit the 'back button' from the browser (desktop or mobile) and when you land on the previous page, the animation doesn't start so in my case I have a panel covering all my page...is there any way to make the same animation for the back button? Would appreciate any help, thanks!

[@VetlyApp]

This works great for the most part. I did find that if you're linking from a cms page to a static page, the outro animation will not run.

[@pixelgeek]

Hmmm.... 🤔 Did you all the custom code on all pages? Including the collection template pages?

[@antoniojansevanrensburg7637]

Hi PixelGeek, can I use this same method on Section transitions? Instead of the entire page, if I clicked for instance "About Me" on the Navigation - The "Process" section will change to "About Me", leaving the rest of the information on the page.

[@olehansen6568]

Can I make this work if I'm linking to a specific section (anchor link) on another page?

[@svnbit8408]

Can anyone confirm, will this work on cms pages? Does it work on longer page load time?

[@jacevans9705]

This is awesome, thanks! When you add the 'curtain up' transition why did you do that on page load rather than set it to happen once the previous animation finished just out of interest?

[@pixelgeek]

Thanks for watching 😁🙇🏽‍♂️ here is what happens... 1. Click on link 2. Outro animation starts 3. Browser timer delay starts 4. After 1 second, the browser goes to the new page 5. The new page loads 6. The intro animation starts This is why you cannot combine the outro and intro animations. Hope this clears up any confusions

[@svnbit8408]

@@pixelgeek when you say "load" to you mean content is fetched? Is there anything limiting this from working on longer page load times? Or cms pages for that matter? Not quite sure if defining "before" or "after page loads" in webflow does what. I see loaders on before or after and it seems they aren't linked to actual page loading, just faked with a delay. I hope that makes sense, not sure if I'd need to add code specific to how long the loader(or outgoing transition stalls, incoming transition delays) displays itself. Thanks bro 👍

[@user-zy2ch8ds4f]

Hello Nelson, implemented it on one of his projects, everything works cool and looks good, but at the moment of appearance of a new page, the animation with an overlay is launched late and the content of the page is visible for a fraction of a second... please help me get rid of this. Tried to run the appearance animation before the page loads, still does not work correctly

[@pixelgeek]

Can you post your read only link?

[@kareemabulaban9456]

quick question! If i have multiple link classes but i want to apply this to multiple classes, should i duplicate the custom code and just change the target class? or is there a way to target mutltiple classes within that one custome code script. ie: $('.nav-link;.cta-link').click(function (e) { e.preventDefault(); var goTo = this.getAttribute("href"); setTimeout(function(){ window.location = goTo; },1000); });

[@pixelgeek]

yes. you're almost right. but instead of a semi-colon between classnames, use a comma. for example $('.nav-link, .cta-link') hope this helps :)

[@kareemabulaban9456]

@@pixelgeek you’re an absolute legend. Thank you!!

[@sabrinado5734]

how do i add this to multiple classes? ('.example' , '.example2') ?

[@pixelgeek]

Like this ('.example, .example2') hope this helps 😁

[@olehansen6568]

2 questions. 1) If I want multiple triggers between the $('') how do I do? Let's say I have a trigger called NAVLINK and BUTTONLINK that I want to trigger the page translation with (one of them in the navbar and the other somewhere on the page). 2) Does it work with combo classes? Thanks and great tutorial as always.

[@pixelgeek]

Great question. To add multiple class names, just do the same thing you do with sending emails to multiple people. Add commas. Example: $('.className1, .className2, .className3') Hope this helps :)

[@olehansen6568]

And does it work with combo classes? Keep these videos coming. Great tutorials 💪

[@pixelgeek]

@@olehansen6568 yes. Just use the parent classname

[@arnoclaude317]

*Hears that custom coding is needed* Ight, Imma head out.

[@pixelgeek]

Just watch. It's easier than you think 😁

[@vinsongotingco5753]

Thanks so much for this Nelson! Quick question tho. This works extremely smooth on Safari, but on Chrome the animation flashes white for a split second before loading the next page. Is there any way to fix this?

[@deejman]

Yeah its happening to me too?

[@tjarcovanraalte939]

@@deejman same, even when icreased the time in the code

[@isabellal1434]

Same here

[@samueljaramillo7144]

Hi Nelson, when I publsih my website I get the custom code being displayed on top of the page as a text

[@pixelgeek]

can you post your read-only link so i can look into this?

[@samueljaramillo7144]

@@pixelgeek I fixed it adding tags thanks so much! your stuff is really helpful and awesome

[@pixelgeek]

Now reviewing my video... How many times do I say "mm'kay?" 😅😅😅 I need to make a mental note of this and stop that.

[@JenniferFarel]

Your tutorials are so good I didn't even notice!

[@davekatz8369]

@pixelgeek My intro animation isn't triggering and I'm not sure why.. Can you see what's going on: preview.webflow.com/preview/daverino?preview=f4513585fefef5cb371001cdfab581f4&mode=preview

[@sebastianfischer4332]

I don't get it... Either the intro or the outro is working, but not both. I can't figure out what's the issue here. Any idea what could be the problem?

[@pixelgeek]

can you please post your read-only link?

[@sebastianfischer4332]

@@pixelgeek thx already figured it out myself.

[@paulharrison8583]

does that delay code working for everyone?? its not working for me at all??

[@pixelgeek]

can you provide your read-only link?

[@fuegocandela]

I love u

[@pixelgeek]

Thanks for your support! 🙇🏽‍♂️😁

[@crarls27]

Oops... this doesn't work at all in my browser. Just a little blip of the overlay div shows for a second and then nothing.

[@pixelgeek]

Can you reply with your read only link? I'll look into it

[@crarls27]

@@pixelgeek Nelson you are really the best. I thank you. Forgot to come back and edit my comment! I figured it out and the issue was with the class name - using capital letters when I shouldnxt have.

[@mariorruiz]

What happens when you open this page on mobile? Will it still work?

[@pixelgeek]

This interaction/trick will still work for mobile 😁👍

[@marvin..m]

Can you please do a tutorial with more a succinct explanation of jquery? Please go into greatest depth so that we can have more control since jquery plays a huge part in customization of sites via webflow. Knowledge is power, after all. Thank you

[@pixelgeek]

I don't think I would be the best teacher to explain jQuery. I'm not that good with coding. Plus there are lots of videos and resources to explain it better than me.

[@marvin..m]

I think you would be the perfect person to explain how a non coder goes about finding and implementing jQuery and figuring out how the code works. Coders get way to technical. For example, if I learn to drive a car I don’t need to understand how turn signals work; just how to use them. Just tell us what you do know and how you choose and implement the code.

[@pixelgeek]

That's what I'm doing. 😁👍 Just give me specific suggestions.

[@marvin..m]

Okay, here are the things I’d like more insight regarding: Once you decide the kind of effect you’re looking for, how do you go about finding the right code and how do you know if the code actually works. When you look at the code how do you know what it’s saying? How do you know which part of the code are the variables. Is there a chart that breaks this down and how can I access this? I’d love to see a line by line breakdown explaining the significance of each character. I don’t want to learn to code, I just want to be able to understand what it’s saying. All the online courses are teaching how to code. That’s my problem. If you see an action on another site, how do you go about locating the code and how much of the code do you copy? When you explain these things please realize that people like me know absolutely nothing and please explain not only what you are doing, but more importantly, the reasoning behind each action. I hope this helps you understand what I’m looking for. Thanks again for putting out these videos. I really like this shortened format which focuses in on a particular aspect. The short tutorials from WF University are very well done and funny, but they skip over a lot of pertinent details assuming the viewer already has certain knowledge. Your longer videos covered too many divergent topics and there didn’t seem to be any way to know what the content was unless I watched each one. Thanks again.