Atom Menu SVG Animation
How do I make an atom menu svg animation?
I'm creating an SVG nav-menu Icon that turns from an atom to a divided sign to close the menu.. What is a atom menu svg animation? How do you make a atom menu svg animation? This script and codes were developed by Alex Coven on 11 August 2022, Thursday.
Atom Menu SVG Animation - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Atom Menu SVG Animation</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapper">
<div class="container">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 30 30" enable-background="new 0 0 30 30" xml:space="preserve">
<!--<g> <circle fill="#F26451" cx="17.6" cy="3.3" r="1.4"/>
</g>
<g> <circle fill="#F26451" cx="6.4" cy="23.1" r="1.4"/>
</g>-->
<line class="line" stroke-width="1.3" stroke-miterlimit="10" x1="3.7" y1="26.1" x2="26.2" y2="3.6"/>
<path class="vertical" d="M9.9,14.9a5,14 0 1,0 10,0a5,14 0 1,0 -10,0"/>
<ellipse class="neg" transform="matrix(0.5037 0.8639 -0.8639 0.5037 20.2917 -5.4991)" stroke-width="1.3" stroke-miterlimit="10" cx="14.9" cy="14.9" rx="5" ry="14"/>
<ellipse class="pos" transform="matrix(-0.5037 0.8639 -0.8639 -0.5037 35.3327 9.5202)" stroke-width="1.3" stroke-miterlimit="10" cx="14.9" cy="14.9" rx="5" ry="14"/>
<path class="circlet" d="M16.4,3.2a1.3,1.3 0 1,0 2.6,0a1.3,1.3 0 1,0 -2.6,0"/>
<path class="circleb" d="M5,23.2a1.4,1.4 0 1,0 2.8,0a1.4,1.4 0 1,0 -2.8,0"/>
</svg>
</div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/6859/tween.min_1.js'></script> <script src="js/index.js"></script>
</body>
</html>
Atom Menu SVG Animation - Script Codes CSS Codes
.wrapper { top:0; left:0; position:absolute; width:100%; height:100%; background:#F26451;
}
.container { width:100%; position:fixed; top:30%; bottom:70%;
}
svg { width:100px; height:auto; margin:10% auto; display:block;
}
line, .vertical, ellipse.neg, ellipse.pos { stroke:#fff; fill:none; stroke-width:1.3; stroke-miterlimit:10;
}
.circlet, .circleb { stroke:#fff; fill:#F26451; stroke-width:1.3; stroke-miterlimit:10;
}
.line { display:none;
}
/*.circlet { -webkit-animation: vertical 2s -5s linear infinite;
animation: vertical 2s -5s linear infinite;
}
@-webkit-keyframes vertical { 0% {transform: scale(1, 1)} 50% {transform: scale(1, 1.1)} 100% {transform: scale(1, 1)}
}*/
/* -ms-transform: skew(30deg,20deg); -webkit-transform: skew(30deg,20deg); transform: skew(30deg,20deg);*/
Atom Menu SVG Animation - Script Codes JS Codes
(function($){ $('[class^="circle-"]').animate({opacity:1},500);
// get the animation path node
var $path = $('.vertical'), path = $path[0];
var $path2 = $('.vertical'), path2 = $path2[0];
// get the animation object node
var $obj = $('.circlet');
var $obj2 = $('.cirlceb');
// get path's length
var pathLength = path.getTotalLength();
var pathLength2 = path2.getTotalLength();
// create new tween by initializing TWEEN.Tween object from 0
var tween = new TWEEN.Tween({ length: 0 }) // to path length // in 2000 milliseconds .to({ length: pathLength }, 1500) // on update callback fires on every tick .onUpdate(function(){ var point = path.getPointAtLength(this.length); $obj.css({ 'transform': 'translate('+ point.x + 'px,'+ point.y +'px)' }); }).repeat(999999999).start();
var tween2 = new TWEEN.Tween({ length: 0 })
// to path length
// in 2000 milliseconds
.to({ length: pathLength2 }, 1500)
// on update callback fires on every tick
.onUpdate(function(){ var point2 = path2.getPointAtLength(this.length); $obj2.css({ 'transform': 'translate('+ point2.x + 'px,'+ point2.y +'px)' });
}).repeat(999999999).start();
// animate loop
animate = function(){ requestAnimationFrame(animate) TWEEN.update()
}
//start the animation loop
animate() }(jQuery));
Developer | Alex Coven |
Username | alcoven |
Uploaded | August 11, 2022 |
Rating | 3 |
Size | 2,919 Kb |
Views | 42,504 |
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!
Name | Size |
Atomic Menu | 6,193 Kb |
Menu Shelf | 7,738 Kb |
SVG Squid Swimming | 2,902 Kb |
A Pen by Alex Coven | 2,569 Kb |
Alex Coven .COM | 5,724 Kb |
Squid Swimming Spinning SVG Animation | 4,005 Kb |
For Brian | 2,058 Kb |
Charging Battery CSS | 2,002 Kb |
Stackoverflow nth-child answer | 1,469 Kb |
Material More Button CSS | 3,723 Kb |
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!
Name | Username | Size |
Process Accordion | Devilskitchen | 31,432 Kb |
Simple Accordion | Wearebold | 3,683 Kb |
Draggables in pure angular | Rlo206 | 5,167 Kb |
Gradient-ui-button-mark-fx | Tabspace | 1,881 Kb |
Simple Carousel Pure CSS | Dangvanthanh | 4,080 Kb |
Svg sky | Omodev | 7,070 Kb |
C.Rowe Button | Brownerd | 2,473 Kb |
Pricing Table | Semenchenko | 6,784 Kb |
SCSS Unit Conversion | Jakob-e | 8,210 Kb |
Free css icon set v2 - one div | Ben_jammin | 0 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!