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 (edited) 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 Edited November 11, 2020 by IXStudio 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 (edited) Awesome thank you!! The fade out works well but the fade in (on page load) doesn't work. @IXStudio Any idea? Edited November 14, 2020 by TOMweb 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 (edited) @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? Edited November 14, 2020 by TOMweb Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment