Logo Animation

Developer
Todd Moy
Size
2,580 Kb
Views
16,192
  1. Logo Animation Previews
  2. Logo Animation HTML Codes
  3. Logo Animation CSS Codes
  4. Logo Animation JS Codes

How do I make an logo animation?

What is a logo animation? How do you make a logo animation? This script and codes were developed by Todd Moy on 14 October 2022, Friday.

Logo Animation Previews
IQ Test

Logo Animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Logo Animation</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <svg class="logo" width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="boxes"> <rect id="b-l" class="box boxGroup-1" fill="#1A82E2" x="0" y="20" width="10" height="10"></rect> <rect id="m-l" class="box boxGroup-2" fill="#99E1F4" x="0" y="10" width="10" height="10"></rect> <rect id="b-m" class="box boxGroup-2" fill="#99E1F4" x="10" y="20" width="10" height="10"></rect> <rect id="m-m" class="box boxGroup-3" fill="#009DD9" x="10" y="10" width="10" height="10"></rect> <rect id="t-m" class="box boxGroup-4" fill="#00B3E3" x="10" y="0" width="10" height="10"></rect> <rect id="m-r" class="box boxGroup-4" fill="#00B3E3" x="20" y="10" width="10" height="10"></rect> <rect id="t-r" class="box boxGroup-5" fill="#1A82E2" x="20" y="0" width="10" height="10"></rect> </g> <g id="frame" stroke="#294661"> <polygon id="perimeter" points="30.5 0.5 30.5 30.5 0.5 30.5 0.5 0.5" class="line"></polygon> <path d="M10.5,1 L10.5,30" id="v1" class="line"></path> <path d="M20.5,1 L20.5,30" id="v2" class="line"></path> <path d="M1,10.5 L30,10.5" id="h1" class="line"></path> <path d="M1,20.5 L30,20.5" id="h2" class="line"></path> </g> </g>
</svg> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js'></script>
<script src='http://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Logo Animation - Script Codes CSS Codes

* { box-sizing: border-box;
}
html, body { height: 100%;
}
body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
}
.logo .line { stroke-width: 1px; stroke: #294661; opacity: 0.3;
}
.logo .box { opacity: 0;
}

Logo Animation - Script Codes JS Codes

var tl = new TimelineMax({ repeat: -1, repeatDelay: 2 });
tl.staggerFrom(".logo .line", 1.0, { drawSVG: 0.0 }, 0.2) .staggerTo(".logo .box", 0.5, { opacity: 0.5 }, 0.05) .staggerTo(".logo #frame", 0.5, { opacity: 0.0 }) .staggerTo(".logo .box", 0.5, { opacity: 1.0 });
Logo Animation - Script Codes
Logo Animation - Script Codes
Home Page Home
Developer Todd Moy
Username toddmoy
Uploaded October 14, 2022
Rating 3
Size 2,580 Kb
Views 16,192
Do you need developer help for Logo Animation?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Todd Moy (toddmoy) Script Codes
Name
Annotation Test
Header Test
Flexbox test
Hidden Menu Test
A Pen by Todd Moy
Pulsar
Experiment
Chrome Store Copy
Loader 5
Experiment
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!