0

I've been trying, for a few days, to add an animation between two different HTML pages/files (index.html -> about.html). My idea is to animate/have a transition when going from one page to the other: in my case from the index.html to the about.html page.

I found a lot of answers on Google and on StackOverflow, but the problem is that the transition happens on the same page which means that the HTML code for both pages is in the same file and my index.html becomes unreadable, especially if I am working on a project that's quite big.

I saw that Google Photos had something quite similar to what I want to achieve. Just open Google Photos and click on an image, and as you might notice, the URL changes from https://photos.google.com to https://photos.google.com/photo/PHOTO_ID and an animation occurs.

Any idea on how Google does this or how I can do it? :) Any help would be greatly appreciated!

The solutions I'd rather avoid are:

  • AJAX (but it's ok if Google uses it, and I doubt they do)
  • Having the HTML for both pages in a single, one file.
  • AngularJS (I'd prefer pure JS)

( this isn't a duplicate, I'd like to know how Google did it ;) )

Toufic Batache
  • 762
  • 10
  • 24
  • use History API to change the URL without refresh, and use ajax GET or fetch GET to retrieve the content. – George Mar 09 '18 at 21:59
  • Do you think that it's done this way with Google? I would rather keep my code simple and clean. Any code example? Thanks! – Toufic Batache Mar 09 '18 at 22:02
  • I don't know how Google does it. I don't know of any other way to change the URL without full page refresh other than use History API. Google seem to use fetch and not ajax. – George Mar 09 '18 at 22:03
  • I'll look into that. Thanks for the info! – Toufic Batache Mar 09 '18 at 22:04
  • You may want to research "Angular Single Page Application". This article seems to answer all your questions: https://scotch.io/tutorials/single-page-apps-with-angularjs-routing-and-templating – doppler Mar 09 '18 at 22:15
  • Yeah that looks Cool! However I'd like to avoid Angular... I'll update my question. – Toufic Batache Mar 09 '18 at 22:18

2 Answers2

1

You could use jQuery to load an HTML file into the body. Here is some very untested pseudo code to make this boneless, single-page-app work:

jQuery

//disable link action and load HTML inside the body tag
$('a').on('click', function(){
    e.preventDefault();
    $('body').load($(this).attr('href'));
}

HTML

<body>
    <h1>title</h1>
    <a href="about.html">link</a>
</body>

If you wish to add an animation effect, you can prepend new HTML to the body, fade the previous HTML, then remove the hidden content.

doppler
  • 795
  • 5
  • 9
1

While I'm not exactly sure of the method Google uses to achieve this, I do know that many of the solutions you would like to avoid are definitely some of your greater options.

Anyhow, a hack to achieve this would be splitting the code up amongst the two pages. Set up a fade out/any animation after a link is clicked on one page and make the other page fade in/any animation after load on the destination page. This is somewhat similar to how I would do it using an XML request, it's just a bit out of general practice.

Again this is a very 'hacky' method, but it gets the job done with very minimal JavaScript code, depending on how you go about it.

Braijon G.
  • 91
  • 4
  • I see what you mean, and I have already thought about this but: 1- when you open the link with the PHOTO_ID, there is no animation. 2- Usually when you switch pages, you see a blank page when loading the second one. Would you mind giving some code example (jsfiddle, etc..)? Thank you!! – Toufic Batache Mar 10 '18 at 06:40