CarolynSmith Posted May 4, 2020 Share Posted May 4, 2020 Site URL: https://hulseygardens.squarespace.com Would anyone be able to provide advice for learning how to code and animate a logo while a site is loading when a user first enters your site? Here is an example: Romair.com For specifics on what I'm trying to achieve, I'd like to make the logo below animate by having the tree element grow up through the "H" in the logo while the site first loads and users are sent to the home page. To do this, I think I may need to separate the logo into two elements - one layer with the green clover outline and "H", and one with the Tree that I'd like to animate. Or maybe the H and tree load together at the same time. There may be other ways to animate using the clover outline of the logo. I am open to creative suggestions. I have Photoshop but not Adobe Illustrator or After Affects. If After Affects is requires to build the code for the logo animation, I'd love advice for free alternatives or workarounds with pure CSS if possible. Thanks so much in advance for your help! Site I'd like to apply this to: hulseygardens.squarespace.com password: 1234 Link to comment
ChromaticZero Posted May 4, 2020 Share Posted May 4, 2020 What you're seeing is an animated SVG file that is hidden after the page loads. You should be able to Google 'Animated SVG' to get an idea of what's involved, or find something that you might be able to alter for your use. A quick search shows this as an example by Sean McCaffery: <div class="svg-wrapper"> <svg height="60" width="320" xmlns="http://www.w3.org/2000/svg"> <rect class="shape" height="60" width="320" /> </svg> <div class="text">HOVER</div> </div> html, body { background: #333; height: 100%; overflow: hidden; text-align: center; } .svg-wrapper { height: 60px; margin: 0 auto; position: relative; top: 50%; transform: translateY(-50%); width: 320px; } .shape { fill: transparent; stroke-dasharray: 140 540; stroke-dashoffset: -474; stroke-width: 8px; stroke: #19f6e8; } .text { color: #fff; font-family: 'Roboto Condensed'; font-size: 22px; letter-spacing: 8px; line-height: 32px; position: relative; top: -48px; } @keyframes draw { 0% { stroke-dasharray: 140 540; stroke-dashoffset: -474; stroke-width: 8px; } 100% { stroke-dasharray: 760; stroke-dashoffset: 0; stroke-width: 2px; } } .svg-wrapper:hover .shape { -webkit-animation: 0.5s draw linear forwards; animation: 0.5s draw linear forwards; } Link to comment
CarolynSmith Posted May 4, 2020 Author Share Posted May 4, 2020 6 minutes ago, ChromaticZero said: What you're seeing is an animated SVG file that is hidden after the page loads. You should be able to Google 'Animated SVG' to get an idea of what's involved, or find something that you might be able to alter for your use. A quick search shows this as an example by Sean McCaffery: <div class="svg-wrapper"> <svg height="60" width="320" xmlns="http://www.w3.org/2000/svg"> <rect class="shape" height="60" width="320" /> </svg> <div class="text">HOVER</div> </div> html, body { background: #333; height: 100%; overflow: hidden; text-align: center; } .svg-wrapper { height: 60px; margin: 0 auto; position: relative; top: 50%; transform: translateY(-50%); width: 320px; } .shape { fill: transparent; stroke-dasharray: 140 540; stroke-dashoffset: -474; stroke-width: 8px; stroke: #19f6e8; } .text { color: #fff; font-family: 'Roboto Condensed'; font-size: 22px; letter-spacing: 8px; line-height: 32px; position: relative; top: -48px; } @keyframes draw { 0% { stroke-dasharray: 140 540; stroke-dashoffset: -474; stroke-width: 8px; } 100% { stroke-dasharray: 760; stroke-dashoffset: 0; stroke-width: 2px; } } .svg-wrapper:hover .shape { -webkit-animation: 0.5s draw linear forwards; animation: 0.5s draw linear forwards; } Thank you so much! I really appreciate your time in responding and advice. I will look into this. Thanks! Link to comment
TOMweb Posted November 1, 2020 Share Posted November 1, 2020 Hi @CarolynSmith Did you find a solution? I am trying to do the same thing and would appreciate any help! Thank you 🙂 Link to comment
NiceDay Posted December 18, 2020 Share Posted December 18, 2020 also jumping into this conversation- would love to know if there was a solution @CarolynSmith and @TOMweb - I too will be looking to execute something identical on a new site. Cheers! Link to comment
TOMweb Posted December 19, 2020 Share Posted December 19, 2020 Hey @NiceDay Create a gif with your logo file (.SVG) using Lottie for example, like below: - go to https://lottiefiles.com/svg-to-lottie - upload your SVG and export it as a JSON file. - go to https://lottiefiles.com/lottie-to-gif - upload your JSON file and use one of the animations provided. Export as a GIF. Then, make sure you upload This GIF via Design > Custom CSS > Manage Your Files, and get the URL. Then, go to Settings > Advanced > Code Injection > Footer Field and paste the code below. Make sure you put in your own gif URL at the bottom of the code. Let me know how this works. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <div class="logoload"></div> <style> .logoload { /* SET BACKGROUND COLOR */ background-color: #000000; /* SET BACKGROUND SIZE */ background-size: 30vh; position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 9999; background-position: center; background-repeat: no-repeat; background-image: url("YOUR URL HERE"); } </style> <script type="text/javascript"> $(window).load(function() { $(".logoload").delay(2500).fadeOut("slow"); }) </script> Jeremyn 1 Link to comment
CarolynSmith Posted December 23, 2020 Author Share Posted December 23, 2020 On 12/19/2020 at 9:06 AM, TOMweb said: Hey @NiceDay Create a gif with your logo file (.SVG) using Lottie for example, like below: - go to https://lottiefiles.com/svg-to-lottie - upload your SVG and export it as a JSON file. - go to https://lottiefiles.com/lottie-to-gif - upload your JSON file and use one of the animations provided. Export as a GIF. Then, make sure you upload This GIF via Design > Custom CSS > Manage Your Files, and get the URL. Then, go to Settings > Advanced > Code Injection > Footer Field and paste the code below. Make sure you put in your own gif URL at the bottom of the code. Let me know how this works. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <div class="logoload"></div> <style> .logoload { /* SET BACKGROUND COLOR */ background-color: #000000; /* SET BACKGROUND SIZE */ background-size: 30vh; position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 9999; background-position: center; background-repeat: no-repeat; background-image: url("YOUR URL HERE"); } </style> <script type="text/javascript"> $(window).load(function() { $(".logoload").delay(2500).fadeOut("slow"); }) </script> Hey @TOMweband @NiceDay! Thank you for sharing your process, @TOMweb! Would you mind sharing the website you've applied this code to? I'd love to see what it should look like when I try it. Thanks so much! Link to comment
TOMweb Posted December 23, 2020 Share Posted December 23, 2020 @CarolynSmith Sure http://endive-denim-89ds.squarespace.com pw: 1404-Hello Link to comment
tuanphan Posted January 2, 2021 Share Posted January 2, 2021 On 12/24/2020 at 4:39 AM, TOMweb said: @CarolynSmith Sure http://endive-denim-89ds.squarespace.com pw: 1404-Hello Do you still need help on this? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Jeremyn Posted October 8, 2021 Share Posted October 8, 2021 (edited) After applying the code by Tomweb I'm looking at adding a fade in animation at the beginning and applying it to the home page only. Also there is a flash background images coming up straight after loading for some reason. How to get rid of that? www.creativeportrait.net.au Quote <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <div class="logoload"></div> <style> .logoload { /* SET BACKGROUND COLOR */ background-color: #000000; /* SET BACKGROUND SIZE */ background-size: 30vh; position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 9999; background-position: center; background-repeat: no-repeat; background-image: url("YOUR URL HERE"); } </style> <script type="text/javascript"> $(window).load(function() { $(".logoload").delay(2500).fadeOut("slow"); }) </script> Edited October 8, 2021 by Jeremyn 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