Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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


CarolynSmith

Question

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

 

Logo Mark Green.jpg

Link to comment

10 answers to this question

Recommended Posts

  • 0

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
  • 0
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
  • 0

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>

 

Link to comment
  • 0
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
  • 0

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 by Jeremyn
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...