Jump to content

"Reveal" Page Transitions

Go to solution Solved by IXStudio,

Recommended Posts

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 ;)

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • Solution

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

Ninja Kit Extension: Upgrade your Squarespace website without coding.

YouTube Preview    -    FREE DOWNLOAD

Link to comment
  • 4 months later...
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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 2 months later...
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)

Link to comment
  • 8 months later...
  • 1 month later...
  • 7 months later...

@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.

ERR_SSL_PROTOCOL_ERROR
Edited by MD21
typo
Link to comment
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%. 

Edited by codeandtonic
better code example with details + new better CSS snippet with color and opacity variables

Freelance Squarespace developer making plugins like Full-Width Blocks, Hover effects for grid gallery and the Darkmode plugin. I know Squarespace inside out and I'm able to solve pretty much any Squarespace code problem.

Get in touch here!

Link to comment
  • 1 month later...
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 🙂

Freelance Squarespace developer making plugins like Full-Width Blocks, Hover effects for grid gallery and the Darkmode plugin. I know Squarespace inside out and I'm able to solve pretty much any Squarespace code problem.

Get in touch here!

Link to comment

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.