Sweep Page Loading Transition
What You'll Create
A smooth, cinematic page transition where a colored panel wipes across the screen when visitors click any internal link. The panel sweeps in from one side to cover the current page (0.6 seconds), holds briefly, then wipes out in the opposite direction to reveal the new page. It's the same polished effect you see on high-end agency and portfolio sites.
The Problem It Solves
Squarespace has no built-in page transitions — when visitors click a link, the new page just appears abruptly. This jarring switch breaks the immersive feel of carefully designed sites. Third-party plugins exist but often conflict with Squarespace's AJAX loading or add unnecessary bloat. This technique uses the lightweight GSAP library for smooth, hardware-accelerated animations that work reliably across all browsers.
Perfect For
Portfolio site navigation, agency website transitions, photography portfolio page changes, brand experience websites, high-end service provider sites
What Makes This Different
This approach uses CSS clip-path for the wipe effect, which is GPU-accelerated and performs smoothly even on mobile devices. The transition automatically detects and skips external links, anchor links, and same-page navigation. It also handles the browser back button gracefully, re-triggering the reveal animation when visitors return to a cached page. An optional fade-in effect can be added for page content after the reveal.
Details
Section Type: Fluid & Classic
Code Type: CSS + JavaScript
Prerequisites: GSAP animation library in Header Code Injection. Page transition div element in Header. JavaScript in Footer Code Injection.
Toolkit Title: Sweep Page Loading Transition
Learn This Technique
This is one of 150+ code techniques taught inside Standout Squarespace, where you get:
The complete, copy-paste code
Video walkthrough explaining how it works
The principles behind the technique so you can customize it
Access to our private community for support