← Go back

🍔 Swing Below Burger

Copy the HTML and CSS below into your project.

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

<svg
	class="swing-below hover:swing-below-opened"
	viewBox="0 0 24 24"
	fill="none"
	xmlns="http://www.w3.org/2000/svg"
>
	<path d="M4 7H20" stroke="#ffffff" stroke-width="2" />
	<path d="M4 12H20" stroke="#ffffff" stroke-width="2" />
	<path
		d="M4 17H20H21.1351C21.6754 17 22.18 17.2701 22.4798 17.7197V17.7197C22.8015 18.2022 22.8399 18.8201 22.5806 19.3388L22.5377 19.4247C22.014 20.472 20.6396 20.738 19.7631 19.9616L4 6"
		stroke="#ffffff"
		stroke-width="2"
	/>
	<path
		d="M20 17H4H2.86491C2.32456 17 1.81996 17.2701 1.52023 17.7197V17.7197C1.19853 18.2022 1.16006 18.8201 1.41942 19.3388L1.46234 19.4247C1.986 20.472 3.36037 20.738 4.23693 19.9616L20 6"
		stroke="#ffffff"
		stroke-width="2"
	/>
</svg>

@tailwind components;
@layer components {
	.swing-below path:nth-child(1) {
		stroke-dasharray: 16;
		stroke-dashoffset: 0;
		@apply transition-all duration-1000 ease-in-out;
	}
	.swing-below path:nth-child(2) {
		stroke-dasharray: 16;
		stroke-dashoffset: 0;
		@apply transition-all duration-1000 ease-in-out;
	}

	.swing-below path:nth-child(3) {
		stroke-dasharray: 45;
		stroke-dashoffset: 29;
		@apply transition-all duration-1000 ease-in-out;
	}
	.swing-below path:nth-child(4) {
		stroke-dasharray: 45;
		stroke-dashoffset: 29;
		@apply transition-all duration-1000 ease-in-out;
	}

	.swing-below-opened path:nth-child(1) {
		stroke-dashoffset: -16;
	}

	.swing-below-opened path:nth-child(2) {
		stroke-dashoffset: 16;
	}

	.swing-below-opened path:nth-child(3) {
		stroke-dashoffset: -24;
	}
	.swing-below-opened path:nth-child(4) {
		stroke-dashoffset: -24;
	}
}