Jump to content

Fade / Transition between pages

Recommended Posts

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

Link to comment
  • 4 months later...
  • Replies 8
  • Views 4.1k
  • Created
  • Last Reply

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

Ninja Kit Extension: Upgrade your Squarespace website without coding.

YouTube Preview    -    FREE DOWNLOAD

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

Ninja Kit Extension: Upgrade your Squarespace website without coding.

YouTube Preview    -    FREE DOWNLOAD

Link to comment

Archived

This topic is now archived and is closed to further replies.


×
×
  • 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.