Animated Cogs

Developer
Houbly
Size
4,303 Kb
Views
28,336
  1. Animated Cogs Previews
  2. Animated Cogs HTML Codes
  3. Animated Cogs CSS Codes
  4. Animated Cogs JS Codes

How do I make an animated cogs?

Testing different methods of animating rotating cogs, CSS only and SVG + GSAP. What is a animated cogs? How do you make a animated cogs? This script and codes were developed by Houbly on 04 November 2022, Friday.

Animated Cogs Previews
IQ Test

Animated Cogs - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Animated Cogs</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> <div class="container">	<div>	<h1>GSAP + SVG</h1>
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 560 560"> <title>cogs</title>
<rect width="560" height="560" fill="none"/>
<g class="cog">	<path d="M353.9,215.5c-0.6-17.8-4.4-34.9-10.7-50.8c11.2-8.3,14.4-23.9,6.9-36c-6.3-10.1-13.6-19.7-21.8-28.3	c-9.7-10.3-25.6-11.2-36.5-2.5c-13.8-10.2-29.5-17.9-46.5-23c0.5-13.9-9.8-25.9-23.9-27.5l-0.3,0c-11.9-1.4-23.9-1.9-35.7-0.8	c-14.1,1.2-24.8,13-24.7,26.9c-17,4.6-32.9,12-47.1,21.8C103,86.1,87.1,86.5,77,96.5c-8.5,8.4-16.1,17.7-22.7,27.6	c-7.9,11.8-5.2,27.5,5.8,36.2c-5.8,13.4-9.8,27.9-11.6,43.2c-0.3,2.4-0.5,4.8-0.7,7.2C34,213.2,24.4,225.9,25.9,240	c1.3,11.9,3.8,23.7,7.4,35c3.3,10.4,12.4,17.4,22.6,18.6c3,0.4,6.2,0.2,9.3-0.5c8.2,15.4,18.9,29.3,31.7,41.1	c-6.5,12.3-2.6,27.8,9.4,35.4c10.1,6.4,20.8,11.8,32,16.1c2.1,0.8,4.3,1.3,6.4,1.6c11.3,1.3,22.5-4.7,27.5-15.3	c3.5,0.6,7,1.2,10.5,1.6c14.1,1.7,28,1.3,41.4-0.7c3.9,9,12.3,14.9,21.6,16c3.9,0.5,8,0.1,11.9-1.3c11.3-3.9,22.2-8.9,32.5-15	c12.2-7.2,16.6-22.5,10.5-35.1c13.1-11.3,24.3-24.8,33.1-40.1c1.3,0.3,2.6,0.6,3.8,0.7c12.2,1.4,24.3-5.7,28.6-17.8	c4-11.2,6.8-22.9,8.5-34.7C376.6,231.6,367.4,218.6,353.9,215.5z M245.6,226.6c-2.9,24.8-25.4,42.6-50.2,39.7	c-24.8-2.9-42.6-25.4-39.7-50.2c2.9-24.8,25.4-42.6,50.2-39.7C230.7,179.3,248.5,201.8,245.6,226.6z"/>	<rect x="22.3" y="43" fill="none" width="356.6" height="356.6"/>
</g>
<g class="cog">	<path d="M510.8,392.3c-0.4-11.7-2.9-23-7-33.4c7.4-5.4,9.4-15.7,4.5-23.7c-4.1-6.7-9-12.9-14.4-18.6c-6.4-6.8-16.9-7.4-24-1.6	c-9.1-6.7-19.4-11.8-30.6-15.2c0.3-9.2-6.4-17-15.7-18.1l-0.2,0c-7.8-0.9-15.7-1.2-23.5-0.6c-9.3,0.8-16.3,8.5-16.2,17.7	c-11.2,3-21.6,7.9-31,14.3c-7-6-17.4-5.7-24.1,0.8c-5.6,5.5-10.6,11.6-15,18.2c-5.2,7.8-3.4,18.1,3.8,23.8	c-3.8,8.8-6.5,18.4-7.7,28.5c-0.2,1.6-0.3,3.2-0.4,4.7c-9,1.7-15.4,10.1-14.4,19.3c0.8,7.8,2.5,15.6,4.9,23.1	c2.2,6.8,8.2,11.4,14.9,12.2c2,0.2,4.1,0.1,6.1-0.4c5.4,10.1,12.5,19.3,20.9,27c-4.3,8.1-1.7,18.3,6.2,23.3	c6.6,4.2,13.7,7.8,21.1,10.6c1.4,0.5,2.8,0.9,4.2,1c7.4,0.9,14.8-3.1,18.1-10c2.3,0.4,4.6,0.8,6.9,1.1c9.3,1.1,18.4,0.9,27.3-0.5	c2.6,5.9,8.1,9.8,14.2,10.5c2.6,0.3,5.2,0,7.8-0.9c7.4-2.6,14.6-5.9,21.4-9.9c8-4.8,10.9-14.8,6.9-23.1c8.6-7.4,16-16.3,21.8-26.4	c0.8,0.2,1.7,0.4,2.5,0.5c8.1,0.9,16-3.7,18.8-11.7c2.6-7.4,4.5-15.1,5.6-22.9C525.8,402.9,519.7,394.3,510.8,392.3z M439.5,399.6	c-1.9,16.3-16.7,28-33,26.1c-16.3-1.9-28-16.7-26.1-33c1.9-16.3,16.7-28,33-26.1C429.7,368.4,441.4,383.3,439.5,399.6z"/>	<rect x="292.6" y="278.8" fill="none" width="234.7" height="234.7"/>
</g>
</svg>	</div>	<div>	<div class="cog-container">	<h1>CSS</h1>	<div class="cog">	<div class="inner">	<div></div>	<div></div>	</div>	</div>	<div class="cog small">	<div class="inner">	<div></div>	<div></div>	</div>	</div>	</div>	</div>
</div> <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="js/index.js"></script>
</body>
</html>

Animated Cogs - Script Codes CSS Codes

.container { width: 40em; margin: 0 auto; display: flex;
}
.container > div { width: 20em; padding: 3em;
}
h1 { font-family: sans-serif; font-weight: bold; font-size: 1.4em; text-align: center; padding: 1em;
}
.cog-container { position: relative; height: 20em;
}
.cog-container .cog { position: absolute; top: 30%; left: 5%;
}
.cog-container .cog.small { transform: scale(0.65); position: absolute; bottom: 13%; top: auto; left: 43%;
}
.cog-container .cog.small .inner { animation: rotate 6s linear reverse infinite;
}
.cog-container .cog .inner { box-sizing: border-box; border-radius: 50%; background: #000; height: 7.5em; width: 7.5em; animation: rotate linear infinite 6s forwards;
}
.cog-container .cog .inner > div { height: 58%; width: 26%; border-radius: 0.65em; background: #000; position: absolute; left: 50%; top: 50%; transform-origin: 50% 0; transform: translate(-50%, 0) rotate(51.428deg);
}
.cog-container .cog .inner > div::before { content: ''; height: 100%; width: 100%; position: absolute; background: #000; border-radius: 0.65em; transform-origin: 50% 0; transform: rotate(51.428deg);
}
.cog-container .cog .inner > div::after { content: ''; height: 100%; width: 100%; position: absolute; background: #000; border-radius: 0.65em; transform-origin: 50% 0; transform: rotate(102.856deg);
}
.cog-container .cog .inner > div + div { transform: translate(-50%, 0) rotate(205.712deg);
}
.cog-container .cog .inner::before { content: ''; background: #fff; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); height: 30%; width: 30%; border-radius: 50%; z-index: 100;
}
.cog-container .cog .inner::after { content: ''; position: absolute; height: 58%; width: 26%; left: 50%; top: 50%; transform: translate(-50%, 0); background: #000; border-radius: .65em;
}
@keyframes rotate { from { transform: rotate(0); } to { transform: rotate(360deg); }
}

Animated Cogs - Script Codes JS Codes

TweenMax.to($(".cog")[0], 6, {	rotation: 360,	transformOrigin: "50% 50%",	ease:Linear.easeNone,	repeat:-1
});
TweenMax.from($(".cog")[1], 6, {	rotation: 360,	transformOrigin: "50% 50%",	ease:Linear.easeNone,	repeat:-1,
});
Animated Cogs - Script Codes
Animated Cogs - Script Codes
Home Page Home
Developer Houbly
Username houbly
Uploaded November 04, 2022
Rating 3
Size 4,303 Kb
Views 28,336
Do you need developer help for Animated Cogs?

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!

Houbly (houbly) Script Codes
Name
A Pen by houbly
Blend Mode test
Scroll prompt
Animated SVG Skills Diagram
Mighty Morphin Power Icon
Scrolling animation things.
Form progress indicator
Audiojs pop ups
Playing out with Susy
Reacting
Create amazing SEO content 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!