Creating an animated loading screen for Squarespace (7.0 & 7.1)
Whether you call it pre load screen, splash screen, loading screen, loading animation or anything else, if you're looking to build a temporary "cover" for the content of your client's site before making a big reveal, this tutorial is for you!
There's more than one way to create and implement this type of element on a website, but today I want to share with you the one that I've found most flexible, based on the kind of animation we'll be giving it.
Enjoy!
You can grab the code over here:
https://beatrizcaraballo.com/blog/cre...
-----------------------------
//Links mentioned
Cubic-bezier curve tool: https://cubic-bezier.com/#.17,.67,.83...
Bennet Feely's Cubic Bezier examples: https://codepen.io/bennettfeely/pen/D...
---------------------------------------------------------------
Sidenote: we actually used another tool from Bennet Feely in this other tutorial: • How to create custom shapes for image... . He created the clippy tool too! https://bennettfeely.com/clippy/
---------------------------------------------------------------
-----------------------
//Timestamps
00:00 - Intro
01:16 - Building the loading screen with HTML
02:40 - Adding the necessary CSS to set up our loading screen
05:16 - Adding the logo to our preload screen
09:47 - Animating the logo to make it rotate
15:57 - Animating the whole loading screen to slide out and reveal the page content
22:35 - Modifying the transition of the loading screen when leaving the window
-----------------------
//Helpful links
⇝ Find the code you need amongst hundreds of Squarespace tutorials and snippets: https://beatrizcaraballo.com/codebase
⇝ Receive new Squarespace CSS tricks and exclusive offers on an often-ish basis: https://beatrizcaraballo.com/vip
⇝ Get in touch: https://beatrizcaraballo.com/contact
-------------------------------------------------------------------
Music from #Uppbeat (free for Creators!):
https://uppbeat.io/t/jonny-boyle/tres...
License code: DT8VYCZ0NE1FUHWY