SVG animate hamburger to cross

Developer
Chris Wright
Size
3,601 Kb
Views
74,888
  1. SVG animate hamburger to cross Previews
  2. SVG animate hamburger to cross HTML Codes
  3. SVG animate hamburger to cross CSS Codes
  4. SVG animate hamburger to cross JS Codes

How do I make an svg animate hamburger to cross?

Just a little experiment with 2 SVG groups in one to create an animation effect. What is a svg animate hamburger to cross? How do you make a svg animate hamburger to cross? This script and codes were developed by Chris Wright on 12 July 2022, Tuesday.

SVG animate hamburger to cross Previews
IQ Test

SVG animate hamburger to cross - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SVG animate hamburger to cross</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 version="1.1" class="svg-inline" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="320px" height="220.5px" viewBox="0 0 32 22.5" enable-background="new 0 0 32 22.5" xml:space="preserve">	<title>Mobile Menu</title>	<g class="svg-menu-animation">	<g class="svg-hamburger">	<path d="M25.07,5c0,0.69-0.5,1.25-1.117,1.25H7.266C6.649,6.25,6.148,5.69,6.148,5l0,0c0-0.69,0.5-1.25,1.118-1.25h16.688	C24.57,3.75,25.07,4.31,25.07,5L25.07,5z"/>	<path d="M25.048,11.25c0,0.689-0.501,1.25-1.118,1.25H7.243c-0.618,0-1.118-0.561-1.118-1.25l0,0c0-0.689,0.5-1.25,1.118-1.25	H23.93C24.547,10,25.048,10.561,25.048,11.25L25.048,11.25z"/>	<path d="M25.094,17.5c0,0.689-0.5,1.25-1.117,1.25H7.289c-0.617,0-1.118-0.561-1.118-1.25l0,0c0-0.689,0.5-1.25,1.118-1.25h16.688	C24.594,16.25,25.094,16.811,25.094,17.5L25.094,17.5z"/>	</g>	<g class="svg-cross">	<path d="M23.302,16.628l-5.395-5.415l5.407-5.345c0.222-0.222,0.222-0.584,0-0.806l-1.538-1.546	c-0.106-0.107-0.251-0.165-0.403-0.165s-0.295,0.062-0.402,0.165l-5.382,5.328l-5.39-5.325c-0.107-0.106-0.251-0.165-0.403-0.165	c-0.152,0-0.296,0.062-0.403,0.165L7.858,5.066c-0.222,0.222-0.222,0.584,0,0.806l5.407,5.346l-5.391,5.41	c-0.107,0.107-0.168,0.251-0.168,0.403s0.057,0.296,0.168,0.403l1.538,1.546c0.111,0.11,0.255,0.168,0.403,0.168	c0.144,0,0.292-0.054,0.403-0.168l5.37-5.396l5.374,5.391c0.111,0.111,0.255,0.169,0.402,0.169c0.145,0,0.293-0.054,0.402-0.169	l1.539-1.546c0.106-0.106,0.168-0.25,0.168-0.402C23.471,16.879,23.408,16.735,23.302,16.628z"/>	</g>	<!-- hit area for interaction -->	<rect class="svg-hitarea" width="320" height="220" fill="none">	</rect>	</g>	</svg> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

SVG animate hamburger to cross - Script Codes CSS Codes

.svg-menu-animation { pointer-events: all; cursor: pointer; -webkit-transform-origin: center; transform-origin: center;
}
.svg-menu-animation:hover .svg-cross { -webkit-transform: scale(1); transform: scale(1); opacity: 1;
}
.svg-menu-animation:hover .svg-hamburger { -webkit-transform: scale(0); transform: scale(0); opacity: 0;
}
.svg-hamburger { -webkit-transform: scale(1); transform: scale(1); opacity: 1; -webkit-transition: opacity 0.2s, -webkit-transform 0.4s ease-in-out; transition: opacity 0.2s, -webkit-transform 0.4s ease-in-out; transition: transform 0.4s ease-in-out, opacity 0.2s; transition: transform 0.4s ease-in-out, opacity 0.2s, -webkit-transform 0.4s ease-in-out; -webkit-transform-origin: center; transform-origin: center;
}
.svg-cross { -webkit-transition: opacity 0.5s, -webkit-transform 0.3s ease-in-out; transition: opacity 0.5s, -webkit-transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out, opacity 0.5s; transition: transform 0.3s ease-in-out, opacity 0.5s, -webkit-transform 0.3s ease-in-out; -webkit-transform: scale(0); transform: scale(0); opacity: 0; -webkit-transform-origin: center; transform-origin: center;
}
.svg-inline { margin: 0 auto; display: block; border: 1px solid #ddd;
}

SVG animate hamburger to cross - Script Codes JS Codes

//this technique is essentially embedding two keyframes into the one svg and transitioning between the two.
//testing results so far:
//Internet Explorer 10 and 11 won't do the scale transform, only the opacity
//apparently there is some way to get scale to work on IE10 and 11 I'm investigating if this is possible
//IE 9 will just do a quick switch without any transition
//Firefox basically ignores transform origin
//in order to get this to work in a similar way I had to do some horrible mozilla targetted transitions using translate, I'm not proud but it sort of works.
//Tested IE 9, 10, 11 - ignored 8, you'll need a polyfill
//Tested FF 27
//Tested Safari 7
//Tested Chrome 32
//Still to test
//Android 4x
//iOS 6+7
SVG animate hamburger to cross - Script Codes
SVG animate hamburger to cross - Script Codes
Home Page Home
Developer Chris Wright
Username chriswrightdesign
Uploaded July 12, 2022
Rating 3.5
Size 3,601 Kb
Views 74,888
Do you need developer help for SVG animate hamburger to cross?

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!

Chris Wright (chriswrightdesign) Script Codes
Name
Experiments with nth-of-type animation
CSS Responsive animated Accordion
IPhone SVG
Background Noisy Radial Gradient
SVG Reflection
Inertia CSS
SVG Shadows
Grid - More complex grids with span
SVG Noise
Offscreen zoom nav
Create amazing sales emails 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!