Animated Page Transitions for Squarespace
From $49
Worked exactly as advertised and I love it. The directions were straightforward. The product is fantastic. Definitely a 5★ product!
– Darryl Rossignol · International OCPD Foundation
Kind Words
Squarespace
Page Transitions?
Add animated page transitions to navigation between Squarespace pages. Adjustable speed and 50 different animations, including fade, zoom Make your website stand out, and be remembered.
What is it?
The best, animated loading animations plugin for Squarespace. Faster than others, more reliable, easier to install. Super flexible. 58 animations and full control over the page transition speed and effect. Has a preloader option with a loading spinner. It’s the best Squarespace animation ever. Works for all Squarespace 7.1 and most 7.0 templates.
Why is this plugin better than others?
One reason. It’s faster. With other plugins, there is a delay after clicking. That completely destroys the experience. This plugin is instant, and the loading is done between the animations. Much smoother.
Animated Page Transitions for Squarespace
By default when clicking a link to go to a new page, the transition is not smooth. It’s kind of blunt and boring. Because we want to be classy, elegant, smooth and stand out from generic Squarespace websites, we want our page-loading animations to be smooth as well.
Blog post about Squarespace loading animations & page transitions
I just wrote an in-depth blog post covering Squarespace Page Transitions and loading animations in my blog.
Compatibility
Requirements
Squarespace (Business or E-commerce plans)
Restrictions
Does not work on Squarespace Personal Plan. You need the “Complete customization with CSS and Javascript” feature.
In Squarespace 7.0 the Ajax loading feature must be turned off.
FAQ
Does this work on Squarespace 7.0 or?
Both. Animated Transitions works for Squarespace 7.1 and Squarespace 7.0. However, in Squarespace 7.0 the Ajax loading feature must be turned off.
Updates
Unlike many others, I often fix minor bugs and
add improvements based on your feedback.
14. Jun 2023
Fixed a bug with gallery block lightboxes. They look like links and would trigger the animation. But as they’re a lightbox, not a link, I excluded the animation from firing with them. Now working perfectly.
5. Jan 2022
Firefox has a bug causing blank pages. Fixed by adding a solution which makes it work, but the animation isn’t as fast as with other browsers. Still quite smooth. Firefox It’s only used by 3.26% of users, so 96,74% of users will still get the perfect, quick animations.
2. Jan 2022
Overlay option unsupported. Safari on iOS has a bug, causing back button to not load with animation. Fixing it would take too much time right now. So using overlay is no longer recommended.
13. Dec 2022
fixed a bug where folders on mobile triggered the animation before clicking the real link inside the folder
30. Oct 2022
Fixed a bug where a gallery block lightbox didin’t open with animations enabled
Massive improvement to the plugin code. It’s now targeting animation element more specifically to make sure that bugs (like gallery lightbox) won’t happen.
Improved the support in older Squarespace 7.0 themes: Mojave, Wells & Wexley
28. Oct 2022
Fixed a bug where the loading screen overlay sometimes had a 0.05 second flash of white when using a different color for the loading screen than the Squarespace background-color.
21. Oct 2022
Fixed “mailto” links that are used for email sending. Those no longer launch the animation and hide the page
Fixed some common download links like pdf’s. They no longer animate or hide the page.
20. Oct 2022
Made the installation easier. Now just 1 copy-paste.
Added 57 new animations
Updates 14. Oct 2022
Added the colour change to the overlay
Added automatic detection for overlay. Now it’s easier to use
Updates 9. Oct 2022
Added the live demo
Minified the code for faster loading
Fixed a bug where overlay z-index left it behind the website
Animations
List of all animations available
FADE IN Animation
Fade in
FADE OUT Animation
Fade out
FADE UP IN Animation
Fade in up small
Fade in up
Fade in up large
FADE UP OUT Animation
Fade out up small
Fade out up
Fade out up large
FADE DOWN IN Animation
Fade in down small
Fade in down
Fade in down large
FADE DOWN OUT Animation
Fade out down small
Fade out down
Fade out down large
ROTATE IN Animation
Rotate in small
Rotate in
Rotate in large
ROTATE OUT Animation
Rotate out small
Rotate out
Rotate out large
FADE LEFT IN Animation
Fade in left small
Fade in left
Fade in left large
FADE LEFT OUT Animation
Fade out left small
Fade out left
Fade out left large
FADE RIGHT IN Animation
Fade in right small
Fade in right
Fade in right large
FADE RIGHT OUT Animation
Fade out right small
Fade out right
Fade out right large
ZOOM IN Animation
Zoom in small
Zoom in
Zoom in large
ZOOM OUT Animation
Zoom out small
Zoom out
Zoom out large
FLIP vertical IN Animation
Flip in vertical far
Flip in vertical
Flip in vertical near
FLIP vertical OUT Animation
Flip out vertical far
Flip out vertical
Flip out vertical near
FLIP HORIZONTAL IN Animation
Flip in Horizontal far
Flip in Horizontal
Flip in Horizontal near
FLIP Horizontal OUT Animation
Flip out Horizontal far
Flip out Horizontal
Flip out Horizontal near
Loading Screen option Animation
Loading Screen animation - slide in top
Loading Screen animation - slide out top
Loading Screen animation - slide in bottom
Loading Screen animation - slide out bottom
Loading Screen animation - slide in left
Loading Screen animation - slide out left
Loading Screen animation - slide in right
Loading Screen animation - slide out right