Fade / Transition between pages

Hi, 

I would like my pages to fade out when navigating to a new page. I know there's the Design / Animation option in 7.1 where I can make images and text fade in but I'm looking for a way for the pages to fade out.

Thanks

I'm interested too!

Hi, @TOMweb @Vstarr

Use this code in Design -> Custom CSS

.animate-in {
	-webkit-animation: fadeIn .5s ease-in;
	animation: fadeIn .5s ease-in;
}
.animate-out {
	-webkit-transition: opacity .5s;
	transition: opacity .5s;
	opacity: 0;
}

And this code in your Footer Code Injection

<script>
  window.addEventListener("beforeunload",function(){document.body.classList.add("animate-out")});
</script>

Please use the like button if it helps you!

Best,
Leopold

@IXStudiothe Footer Code Injection doesn't work for me (it seems like Squarespace doesn't understand what this is). Should I place it within <script></script> or something like that?

Thank you!!

1 hour ago, TOMweb said:

Should I place it within <script></script> or something like that?

Hi,
Yes! You need to append it to <script> tag!

<script>
  window.addEventListener("beforeunload",function(){document.body.classList.add("animate-out")});
</script>

Please use the like button if it helps you!

Best,
Leopold

Awesome thank you!! The fade out works well but the fade in (on page load) doesn't work. @IXStudio Any idea?

@IXStudio I’ve tried adding the page footer script code to the page header, replacing “beforeunload” with “onload” ou “load” ou “pageload” and “animate-out” with “animate-in” but that didn’t work either. 

Hi @TOMweb
Please check this code. I'm not sure! But you can use loading effect for your site.

<script>
document.addEventListener( 'beforeload', function( event ) {
    event.preventDefault();
    document.body.classList.add("animate-in")
}, true );
</script>

@IXStudiothank you for your help. It doesn't seem like this code is working either... What loading effect are you thinking of? Are they integrated in Squarespace?