Vstarr Posted June 30, 2020 Share Posted June 30, 2020 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
IXStudio Posted November 9, 2020 Share Posted November 9, 2020 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
TOMweb Posted November 11, 2020 Share Posted November 11, 2020 @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!! Link to comment
IXStudio Posted November 11, 2020 Share Posted November 11, 2020 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
TOMweb Posted November 11, 2020 Share Posted November 11, 2020 Awesome thank you!! The fade out works well but the fade in (on page load) doesn't work. @IXStudio Any idea? Link to comment
TOMweb Posted November 13, 2020 Share Posted November 13, 2020 @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. Link to comment
IXStudio Posted November 13, 2020 Share Posted November 13, 2020 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> Ninja Kit Extension: Upgrade your Squarespace website without coding.YouTube Preview - FREE DOWNLOAD Link to comment
TOMweb Posted November 14, 2020 Share Posted November 14, 2020 @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? Link to comment
Recommended Posts
Archived
This topic is now archived and is closed to further replies.