Squarespace Page
Transitions Video
Best loading animation
for Squarespace
Live Demo
Visit demo website here.
Password: 'a'
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.
Ad
Updates 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.
Updates 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.
Updates 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.
Updates 13. Dec 2022
- fixed a bug where folders on mobile triggered the animation before clicking the real link inside the folder
Updates 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
Updates 28. Oct 2022
- Fixed a bug where the loading screen overlay sometimes had a 0.05 second flash of white when using different color for the loading screen than the Squarespace background-color.
Updates 21. Oct
- 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.
Updates 20. Oct
- Made the installation easier. Now just 1 copy-paste.
- Added 57 new animations
Updates 14. Oct
- Added the color change to the overlay
- Added automatic detection for overlay. Now it’s easier to use
Updates 9. Oct
- Added the live demo
- Minified the code for faster loading
- Fixed a bug where overlay z-index left it behind the website
Does it work on 7.1 or 7.0?
Animated Transitions works for Squarespace 7.1 and Squarespace 7.0.
In Squarespace 7.0 the Ajax loading feature must be turned off.
Which Squarespace plan do I need?
- Business
- BASIC Commerce
- ADVANCED Commerce
Does NOT work on Personal plan, because we cannot add code to it.
How do I install it?
It’s really easy. One copy-paste is all you need. The product includes video instructions step by step, so you can’t go wrong.
Squarespace Page Transitions & Loading Animation list
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
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
ROTATE IN Animation
- Rotate in small
- Rotate in
- Rotate in large
ROTATE OUT Animation
- Rotate out small
- Rotate out
- Rotate 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
ZOOM IN Animation
- Zoom in small
- Zoom in
- Zoom in large
ZOOM OUT Animation
- Zoom out small
- Zoom out
- Zoom out large
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