← Go back

🍔 Swing Over Burger

Copy the HTML and CSS below into your project.

Remember to programmatically add the .swing-over-opened class to the burger when you want to trigger the animation (for now we trigger it on hover).

<svg
	class="swing-over hover:swing-over-opened"
	viewBox="0 0 24 24"
	fill="none"
	xmlns="http://www.w3.org/2000/svg"
>
	<path d="M4 12H20" stroke="#ffffff" stroke-width="2" />
	<path
		d="M4 7H20H20.8905C21.9112 7 22.6177 5.98051 22.2593 5.02479V5.02479C21.8958 4.05559 20.668 3.76072 19.904 4.45917L4 19"
		stroke="#ffffff"
		stroke-width="2"
	/>
	<path
		d="M4 17L20 17L20.8905 17C21.9112 17 22.6177 18.0195 22.2593 18.9752V18.9752C21.8958 19.9444 20.668 20.2393 19.904 19.5408L4 5"
		stroke="#ffffff"
		stroke-width="2"
	/>
</svg>

@tailwind components;

@layer components {
	.swing-over path:nth-child(1) {
		stroke-dasharray: 16;
		stroke-dashoffset: 0;

		@apply transition-all duration-1000 ease-in-out;
	}

	.swing-over path:nth-child(2) {
		stroke-dasharray: 44;
		stroke-dashoffset: 28;
		@apply transition-all duration-1000;
	}

	.swing-over path:nth-child(3) {
		stroke-dasharray: 56;
		stroke-dashoffset: 40;
		@apply transition-all duration-1000;
	}

	.swing-over-opened path:nth-child(1) {
		stroke-dasharray: 16;
		stroke-dashoffset: 16;
	}
	.swing-over-opened path:nth-child(2) {
		stroke-dasharray: 44;
		stroke-dashoffset: -23;
	}
	.swing-over-opened path:nth-child(3) {
		stroke-dasharray: 44;
		stroke-dashoffset: -23;
	}
}