Has anyone had success animating a logo while the site loads?

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!

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;
}

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! 

Hi @CarolynSmith

Did you find a solution? I am trying to do the same thing and would appreciate any help!

Thank you 🙂

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!

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>

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!  

 

@CarolynSmith

Sure http://endive-denim-89ds.squarespace.com

pw: 1404-Hello

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?

No thank you!

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>