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 |
SVG Hand-Lettering Animation | 4,295 Kb |
Hamburger to atom menu CSS | 2,353 Kb |
Scroll SVG fill animation | 2,793 Kb |
Check it off | 3,524 Kb |
SVG Squid Swimming WIP Hover | 3,405 Kb |
Word randomize and replace. | 2,221 Kb |
Stackoverflow nth-child answer | 1,469 Kb |
Tazo Assets | 2,403 Kb |
Material Bounce Effect | 6,217 Kb |
SVG Squid Swimming | 2,902 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 |
SVG Scalable Text | Said_FD | 1,451 Kb |
A Pen by tugce | Ecgutcnkr | 4,197 Kb |
Hover Animation from UNIQLO | Insprd | 3,772 Kb |
RollOver Effect 2 | Lmack90 | 2,162 Kb |
This in constructor context | _shree33 | 1,718 Kb |
P1 | Vivi_Lai | 1,533 Kb |
Large canvas mousemove experiment | Jibbon | 2,885 Kb |
Firefox Breakout Guide | Quincysoeliman | 2,576 Kb |
Polo, the flying squirrel | Agbales | 2,445 Kb |
SnappySnippet Test | Elmsoftware | 8,385 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!