CODEWITHSUNDEEP
javascripthtmlajaxwebtransition
Vee
Vee

Reputation: 31

HTML/Javascript page transition

I've been browsing Awwwards and i saw websites that has a custom page transition specifically this one https://phoenix.cool/ and I've been wondering how do they do that smooth transition to other page. If you have any source on page transitions that would be highly appreciated. thank you.

Upvotes: 1

Views: 1360

Answers (1)

entio
entio

Reputation: 4253

Handling URL change

Usually you make use of browser's history api, which means that you don't really navigate away fto another page, just update the url in the browser, f.e:

history.pushState({ foo: "bar" }, "Next page", "secondPage.html");

That allows providing seemingless experience. Note, that providing secondPage.html does not load any html. Everything but url change has to be handled manually by developer.

Animation itself

As you have to handle it manually, you can make it whatever you want. You can find neat examples on codrops (f.e. https://tympanus.net/codrops/2013/05/07/a-collection-of-page-transitions/). You have to attach animation to window.onpopstate event. Explanation in the very same MDN article.

There's link to good example at the bottom of the article where you can see example implementation.

Edit: Ready made solution: I came across barba.js accidentally today and it seems to be precisely what you could be looking for. Check it out: http://barbajs.org

Upvotes: 1

Related Questions