Site URL: https://www.laterwolf.com

Hi! I can't seem to find out how the designer of this page managed to create the transition/reveal effect in between pages. You'll see what I mean when you click on a page in the navigation (Info). 

Is this something I can do with CSS? I'm using Brine 7.0 so there's no site-wide animations built-in. 

Thanks for any help with this! 

If you inspect element above site, you will see this tag

Quote

<div class="Loader"></div>

If you remove this tag, the effect will disappear ;)

Thank you! That's so helpful! How do I add this effect to my website, simply by adding this (<div class="Loader"></div>) to my CSS? Thanks for the beta!

Thanks @IXStudio, that did the job. Appreciate your time! 

Hello, I am trying to do the same feature and followed the above instructions with now luck. Any help would be greatly appreciated! I have the same Brine Layout currently

@Chardyjs

Please post the URL for your site.

If your site is not public please set up a site-wide password, if you've not already done so. Post the password here.

We can then take a look at your issue.

Apparently my client wants to ow switch to a wix site but still have this feature. Is this code only for Squarespace or can it be used on any site?

2 minutes ago, Chardyjs said:

Apparently my client wants to ow switch to a wix site but still have this feature. Is this code only for Squarespace or can it be used on any site?

it will not work on wix

2 hours ago, Chardyjs said:

Is this code only for Squarespace or can it be used on any site?

The code itself was designed for a SS site and can't be used directly on Wix as bangank36 mentions. However the effect can be applied to many sites with the proper coding.

On 8/27/2020 at 9:38 PM, IXStudio said:

Hi

Use this code in Design -> Custom CSS

.Loader {
    position: fixed;
    top: 0;
    left: -100%;
    width: 100%;
    height: 1440px;
    z-index: 9999;
    background-color: transparent;
    -webkit-transition: background-color .3s ease-out,transform 0s .3s linear;
    -moz-transition: background-color .3s ease-out,transform 0s .3s linear;
    -ms-transition: background-color .3s ease-out,transform 0s .3s linear;
    -o-transition: background-color .3s ease-out,transform 0s .3s linear;
    transition: background-color .3s ease-out,transform 0s .3s linear;
    display: none
}[data-mercury-loading] .Loader {
    background-color: rgba(255,255,255,.22);
    -webkit-transition: transform .3s cubic-bezier(0,0,0,.618);
    -moz-transition: transform .3s cubic-bezier(0,0,0,.618);
    -ms-transition: transform .3s cubic-bezier(0,0,0,.618);
    -o-transition: transform .3s cubic-bezier(0,0,0,.618);
    transition: transform .3s cubic-bezier(0,0,0,.618);
    -webkit-transform: translatex(60%);
    -moz-transform: translatex(60%);
    -ms-transform: translatex(60%);
    -o-transform: translatex(60%);
    transform: translatex(60%)
}[data-mercury-loading='done'] .Loader {
    -webkit-transform: translatex(100%);
    -moz-transform: translatex(100%);
    -ms-transform: translatex(100%);
    -o-transform: translatex(100%);
    transform: translatex(100%)
}

.tweak-site-ajax-loading-enable.tweak-site-ajax-loading-bar-show .Loader {
    display: block
}

Please use the like button if it helps you!

 

Best,

Leopold

Hey Leopold @IXStudio

I'd love to implement this kind of page transition effect on my client's 7.1 site - I've tried using just the CSS alone but to no avail.

Any suggestions would be hugely appreciated!

acg-demo.squarespace.com (password: demo)

it's doesn't work 😬 help please

its still appear the with page in the transition between pages 

Hello!

The code unfortunately does not work on my 7.1 site. Here is my site: https://www.mauvesocial.com. I would greatly appreciate any help!

@mauvesocial I know you posted a while ago, but I clicked your URL, your site is not https secure. Getting a an error page. You might want to enable https in the backend of site: SETTINGS >ADVANCED >SSL >SECURE PREFERRED

This site can’t provide a secure connection

www.mauvesocial.com. sent an invalid response.

On 3/31/2021 at 3:01 PM, Webswool said:

I'd love to implement this kind of page transition effect on my client's 7.1 site

Can't get exactly the same but we can get close. Or do even better.

Similar page transition animations for Squarespace 7.1 & 7.0

• A (paid) plugin  - quick and easy option if you don't want to tinker with code.
• I've made a free step-by-step video tutorial for adding page transitions to Squarespace. This is for code nerds 🤓  who want a free DIY solution tailored and learn more code stuff.
• Either way I recommend using the awesome Animsition jQuery plugin to make page transitions. Both the Squarespace Page Transitions plugin and the video tutorial use that as a foundation. Animsition is great because it has 58 animations, fade, zoom, rotate, flip etc.  Although latest version is from 12th Aug 2017 – that just means the browser support is going to be very broad! Animsition had a lot of people contributing to it so I trust it to be quite robust. 

Remember – with a loading animations if you have a bug it might prevent loading of the page fully! So make sure to use something reliable (like the options above)

Animation for laterwolf.com – Squarespace 7.0 Brine family only

I made a "plugin" where you can easily edit the color and opacity.
Add to Custom CSS:

/*
🎩  Squarespace Brine Animated Transitions
*/

//Edit loading slider color and opacity
@loaderColor: blue;
@loaderOpacity:40%;

.Loader {
  height: 100vh !important;
}

[data-mercury-loading] .Loader {
  background-color:  fade(@loaderColor, @loaderOpacity);
}
[data-mercury-loading='done'] .Loader {
// custom styles here when loader is at 100% in the right edge
}

/*
🎩  Squarespace Brine Animated Transitions
*/

Explanation – how the laterwolf.com animation code works

https://www.youtube.com/watch?v=-nYZIYU6ChQ

The website laterwolf.com uses Squarespace 7.0 Brine family, which has something called "ajax-loading" feature. With the ajax loading enabled the template will have a small 5px white high loading bar on top. It goes from left to right once the page load.  We can turn the small 5px bar into full-heigh 100% "curtain" that sweeps through the entire page. 

When the animation is loading, the <body> element will have  [data-mercury-loading] attribute which makes the loading bar go to 60%. Once it's loaded that attribute turns into [data-mercury-loading='done'] and it reached the right edge, or 100%. 

@codeandtonic

If I am not mistaken you have something to do with VoxPop? Didn't you take over or something like that?

I just want to say that your plugin is out of control awesome. You should submit it to Ghost Plugin's Market Place because I can only imagine how many SQSP designers are looking for this but can't find you. Amazing and beautiful work!

On 11/25/2022 at 12:29 PM, MarcWatson said:

@codeandtonic

If I am not mistaken you have something to do with VoxPop? Didn't you take over or something like that?

I just want to say that your plugin is out of control awesome. You should submit it to Ghost Plugin's Market Place because I can only imagine how many SQSP designers are looking for this but can't find you. Amazing and beautiful work!

Thanks Marc! Glad you like it.

That's a great tip – I'll make sure to add it to Ghost Marketplace as well 🙂