Creating a page transition effect

[@Cafeston]

Works great. I like this method, it's clean and can be applied to existing projects. The only thing you have to do is to add a trigger class. Works with CMS links too. If I may: 1/ Double-check your class names. Ex: a selector "My Link" translates into 'a.my-link' 2/ Works only when published 3/ Code for easy copy-pasting $('a.my-link').click(function (e) { e.preventDefault(); var goTo = this.getAttribute("href"); setTimeout(function(){ window.location = goTo; },1000); }); Thank you and the op's, great stuff. Until Webflow adds a timer built-in.

[@svnbit8408]

Know how to implement with a page wipe overlay with preloader? One that uses Js to remain until content loaded befor presentation? I'm aware that I can create a fake one, but looking for something with that functionality.

[@jom1439]

Instead of placing the overlay as 'relativ to' I would recommend t use fixed instead. This way it will also work on pages that are longer than a viewport, so you can reuse the class overlay on every single page :)

[@ranger-barry]

Thanks Jo

[@alex_yates]

Thank you for this Jo. It helped me out.

[@vitalykapshul]

thank you Jo!

[@bastian_3402]

great explanation thank you. There is the usual problem, when you hit the back button it will not work anymore

[@ottopanker3164]

U are the best man I love your videos. I have a question. If I put the button into a div, how can I call it in js?

[@jessicaeleanor6294]

I love you so much Webflow

[@122223333111]

Is it possible to use a different loader on landing page and a different loader for another page?

[@Webflow]

Yes. You can change the element styles to however you see fit 😀

[@MichealBeaulieu]

NICE!! Putting this to good use right now :) Thank you Nelson

[@Kamalmostofiphotography]

Hi - Nice tutorial. What would you do in mobile design? When you shift the overlay to the side, in mobile design, the page/canvas stretched longer or taller. How would you fix it?

[@FREE_FORM_FROM]

hey, thanks! can you please write the code in the description?

[@footune]

How do you stop the scroll? The overlay absolute top 100% forces a scroll, even when overflow is set to hidden on wrapper. Even on nelsons clone it does this :(

[@moesoheili4517]

How can I make page transition in react router pages?Thk

[@ScottYuJan]

Has nobody actually notice the fact that this completely breaks when people use the back button on safari on desktop and mobile? When you go back to a page on safari it doesn't refresh the page which means after the "exit animation" when users come back to the original page via the back button, it's just stuck at a blank page....

[@ScottYuJan]

i panicked but nevermind. found some code that forces refresh when the back button is used. $(window).bind("pageshow", function(event) { if (event.originalEvent.persisted) { window.location.reload() } });

[@TheIinInterconnectedness]

@@ScottYuJan Thank youuuuu

[@jonathanpatterson9598]

Thanks for this tip-noted for future reference!

[@kerebus6]

the project over on the webflow site int quite working. the transitions don't show up:(

[@ccCat888]

me too...

[@maxfri6680]

hi, doing this i noticed that the code shows up at the bottom of my footer; how can i use the code without the script being shown?

[@unreleased74]

Sorry bout the totally ignorant question but how would I implement this on an existing site?

[@smiletimedk]

Is there another way to code a transition page without the blue loading from left to right in top on Safari browser?

[@piotrzaborowski6388]

I love You man. Great job

[@bnop9001]

This is working for me but i cant get it to work for multiple pages. advice? Id rather not have to build a overlay and separate animation for each page

[@shubhanksahay5888]

This tutorial didn't work for me. I think the video was very helpful, but when implementing custom-code, it didn't end up actually changing anything. I then found out that my links were called "hiddenlink" instead of a.link, so I changed it to a.hiddenlink, but that didn't fix it either. ps could we have more videos on implementing custom code.

[@jom1439]

if you haven't fixed it already, the class name which is relevant is behind the a. - so class name 'hiddenlink' would require you to type a.hiddenlink in your Custom Code - then it should work :) basically the 'a.' tells the browser "attention, now theres a class name incoming" :D

[@ThisIsDex]

didnt work for me, have the same issue. the exact same code. but the delay dosent happend even after changing and adding a.class-name to all of the classes affected.

[@seancaillouette]

I couldn't locate your stream on communitystream.webflow.io. Did I type it wrong or is not ready yet?

[@Gootsffrida]

What dev environment are you using?

[@ccCat888]

It's not working.. when I opend the clone site.

[@JoshuaOnTheTube]

Not working for me either when cloning.

[@shrblv]

Nice video, however this method only works if your page has 2 words and a button, since it relies on the premise that loading times are immediate for all sites everywhere regardless of their content, user's connection, or rendering device. Under a hopeful effort that someone with more experience than me (which is not a lot) sees this, ill post my conundrum: Im currently considering migrating a site (that has actual page transitions, by mild DOM rewriting) to webflow, but im not sure if i can just grab content from another page and insert it / render it on the current one (updating pushstate history after that), being it "collection items" and whatnot. Admittedly, i have just started reading the API, and i know how to do this with javascript but i just dont know if the way webflow is built will allow me to... And cant really test it since i have to pay in order to insert custom code; an investment that would be lost if its not possible in the end... Anyone?

[@jom1439]

since the page load animation (the wrapper goes down after entering the new site) is set to "page load" in the interactions panel it should rest in the initial state and just start the animation when the page finishes loading. At least thats what I am hoping for. But n one of the last livestream he described the function of the "page load" as follows: 'the animation starts after all the html css and custom code has been loaded' he actually DID NOT mention the actual contents of the site. I will try it out on a page with a large BG-video and edit my post here soon. EDIT: Yes. It worked as intended. I had to wait about 10sec with a purple screen; 10mb of photos and a 30mb BG video were already loaded and playing :) - now its time to get a nice loading animation inside that purple box huh? :)

[@zoharlindenbaum]

For some reason the custom code doesnt work. Very frustrating. I checked a million times to see if I have any errors but I dont. GRRRR...

[@kimia0mirenayat]

make sure the "a.link" section of the code is set to whatever the class of your link element is... If the link for your class is, for example, "myButton" you have to change "a.link" to "a.mybutton". Also another tip: Webflow's code turns your capitalized class names into lowercase.

[@MuhammadAdnan-gx6rd]

why dont you use html css

[@MuhammadAdnan-gx6rd]

Nelson Abalos Jr I'm talking about Barbajs.org here is page transition demo and code

[@MuhammadAdnan-gx6rd]

Bro just awesome

[@diegomarquez4054]

Not working for me either :(

[@JoshuaOnTheTube]

Same for me.

[@7FoX]

I did Everything but is not working as it should :/ $('a.link').click(function (e) { e.preventDefault(); // prevent default anchor behavior var goTo = this.getAttribute("href"); // store anchor href setTimeout(function(){ window.location = goTo; },1000); });

[@danramzdev]

Are you sure that the class is link? if you use a class like, Nav Link web flow change it to nav-link. so you should use $(a.nav-link).click...

[@aprodan5245]

I came here to page Transitions... I got distracted by the awesome star wars Legos...

[@fabioharuo756]

666 likes ☠