0

Is it possible to animate a div, or any other HTML element on a page refresh using jQuery or a similar web technology?

I am thinking something like the Google Photos search box animation.
When clicking the input, the element remains, while the rest of the page fades out and the URL changes. Then the new elements fade in.

This has to be possible by telling the browser somehow that an element should remain on the page after a request and providing the information, that it is the same as the other element loaded with the request.

heroxav
  • 1,387
  • 1
  • 22
  • 65
  • 1
    Google Photos is an SPA - single page application. It doesn't actually navigate to another page. Google have got `window.history.pushState` down to a fine art. – freedomn-m Jun 25 '17 at 16:31

1 Answers1

1

This is the combination of two things:

  1. Typical animation (you can do that with jQuery by adding classes and leave animation to CSS or use jQuery Animations https://www.w3schools.com/jquery/jquery_animate.asp)
  2. History API (https://developer.mozilla.org/en-US/docs/Web/API/History_API) you can manipulate with URL
pkolawa
  • 653
  • 6
  • 17
  • So it's not possible to persist certain elements after a GET request has been made? – heroxav Jun 25 '17 at 15:57
  • 1
    You can show/animate DOM elements based on URL even without jQuery. More informations you'll find [here](https://stackoverflow.com/questions/406192/get-current-url-in-javascript) – pkolawa Jul 09 '17 at 11:23