Jump to content

How to smoothly animate page load transitions?

Recommended Posts

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?

Link to comment
  • 3 months later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.