← Go back

🍔 Swing Middle Burger

Copy the HTML and CSS below into your project.

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

<svg
	class="swing-middle hover:swing-middle-opened"
	viewBox="0 0 24 24"
	fill="none"
	xmlns="http://www.w3.org/2000/svg"
>
	<path d="M4 17H20" stroke="#ffffff" stroke-width="2" />
	<path d="M4 7H20" stroke="#ffffff" stroke-width="2" />
	<path
		d="M20 12L4 12V12C2.89543 12 2 11.1046 2 10L2 6.0718C2 5.11994 3.00171 4.50085 3.85307 4.92654V4.92654C3.95062 4.97531 4.04154 5.03635 4.12362 5.10817L20 19"
		stroke="#ffffff"
		stroke-width="2"
	/>
	<path
		d="M4 12L20 12V12C21.1046 12 22 11.1046 22 10L22 6.0718C22 5.11994 20.9983 4.50085 20.1469 4.92654V4.92654C20.0494 4.97531 19.9585 5.03635 19.8764 5.10817L4 19"
		stroke="#ffffff"
		stroke-width="2"
	/>
</svg>

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

		@apply transition-all duration-1000 ease-in-out;
	}
	.swing-middle path:nth-child(2) {
		stroke-dasharray: 48;
		stroke-dashoffset: 0;

		@apply transition-all duration-1000 ease-in-out;
	}
	.swing-middle path:nth-child(3) {
		stroke-dasharray: 48;
		stroke-dashoffset: 32;

		@apply transition-all duration-1000 ease-in-out;
	}
	.swing-middle path:nth-child(4) {
		stroke-dasharray: 48;
		stroke-dashoffset: 32;

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

	.swing-middle-opened path:nth-child(1) {
		stroke-dashoffset: 16;
	}
	.swing-middle-opened path:nth-child(2) {
		stroke-dashoffset: -16;
	}
	.swing-middle-opened path:nth-child(3) {
		stroke-dashoffset: -26;
	}

	.swing-middle-opened path:nth-child(4) {
		stroke-dashoffset: -26;
	}
}