This is the homepage

Removing and adding planes at each AJAX call

Sometimes, you may want to use curtains.js with an ajax navigation. Usually, we would put all our planes inside a div that would always be in the DOM no matter the page you're looking at, and hide or show the planes depending on your needs.

But thanks to the removePlane() method there's now another way to achieve it. Although it has its downsides, the HTML markup is cleaner, and the javascript part is pretty easy.
Instead of loading all the planes once on first load, the idea is to delete planes just before each AJAX call and to add new planes just after we'd get the AJAX response.

After initialising our main Curtains object on window load, this is what happens when you click on a menu link above:

  1. Get the link href and send an AJAX call
  2. Once we got the response, remove all the existing planes via the removePlane() method, set a timeout (useful to animate page transitions) and append the new content
  3. Append the new content, add the new planes via the addPlane() method if needed

Pros

  • Clean code and SEO friendly markup
  • Perfect to use with SPA frameworks like React, Vue or Angular (or with your own custom AJAX navigation script)

Cons

  • Can cause a small delay before appearing, mostly due to images (or other assets) loading time