Seamless url change

Question

How do sites like this change urls seamlessly?

If you scroll on this link it animates a transition and the url changes from:

http://www.e-types.com/

to

http://www.e-types.com/work

And if you click the logo it transitions back without any flicker or loading time. Any ideas what method they're using?

Thanks for your time.

Answer 1

The idea behind is that there is only one page (single-page application).

The change in URL is handled by the History API, as mentionned in the comments : https://developer.mozilla.org/en-US/docs/Web/API/History_API

But it only changes the address, it does not actually load a full document. So the javascript can do any transition it wants on the content.

There is plenty of libraries that offer this feature.

More specificly, the linked site uses AngularJS.

You can find a complete example of ng-animate + router at this address: https://github.com/cornflourblue/ng-animate-ui-router-example

Depending on what you need, you can use a simple scroll with: https://github.com/oblador/angular-scroll

You can also do similar things with other popular tools:

• VueJS: https://router.vuejs.org/en/advanced/transitions.html
• React: https://github.com/maisano/react-router-transition