How to smoothly animate page load transitions?

Common with Webflow and other sites, smooth page loading transitions are really popular using jQuery. or other Javascript animations. I have been trying to implement this into a new site build yet JQuery just does not work for me properly (def lack of experience) and I'm back to square one.

Does anyone have a really simple method to do the following:

Smoothly slide away content on screen when clicking any link, and smoothly slide in new page content?

My theory based on Webflow should be to do the following, how can this be done in Squarespace?

1. On site load have a blank div block cover all content until page has loaded.

2. Once Page has loaded have the div block slide up or sideways, revealing content.

3. On any nav menu item or button click, create click through delay to allow for the reverse slide in div block transition effect to complete.

4. On new page load, display the same as 2. A smooth reveal of content.

This should result in a smooth and visually appealing site. Without it, it's junky and clunky as all the elements load, and disruptive to the eyes when transitioning between pages. I want to avoid that. I really want to find a simple method that can be applied to any square site, just by simply changing a couple tags as per the site.

So far, I have been able to create a simple blank div block and have it swipe away on page load. That part is fine, yet I cannot manage do the reverse on a link click and cannot find out how to do it.

Who has been able to do this successfully with Squarespace so far?

+1, I've noticed this myself. Especially when any custom code has been added to arrange things, there's a noticeable jump as everything loads into place.

Would be great to make these page transitions smoother, even if it meant adding, 0.2/0.5s delay.