Squarespace Loading Animation & Page Transitions · Tutorial (2022)

[@znere65]

Thank you a lot for your tutorial! I tried to follow your steps correctly and you helped me to get it to a very nice result. Last thing that you might be able to tell me is how to get rid of the flickering between the two overlay effects. For a short amount of time I am able to see through the slides on the page before the effect ends. Thanks in advance. Cheers

[@willsharp9795]

Thank you so much for the great video! I was wondering how I would get the animation to fade to a black instead of white?

[@livelife1899]

I'm trying to follow the tutorial and don't see the Advanced button under Settings :(

[@monsieurm2904]

Now, we have to go directly to Website > Added Features (bottom to list) > Tools for website > Code injection

[@monsieurm2904]

I try but the outclass doesn't work :( the animation after click don't appear, instead just the inclass appear

[@andreasmaris2026]

Is there a way for this code to work to still work without setting the #siteWrapper opacity to 0? By setting #siteWrapper opacity to 0 my landing page is not working, I'm trying to find a different target element but nothing works so far

[@conversiontracking]

You can also target , however the the plugin, animsition, should animate the opacity to be 1, visible when loading. So there's probably a problem. Did you get my plugin or DIY? This is actually a bit more complicated than I thought. I've had to add a LOT of bug fixes and updates to my plugin after releasing this tutorial video

[@gvidasalekna1808]

Why did you release the video tutorial and not fix it later on or warn anyone? just take down the video dude@@conversiontracking

[@dyanrunn]

Unfortunately the page header and footer are both inside the #siteWrapper so setting it to 0 means it disappears. I see a few comments touch on this subject but don't point this out directly...