SVG Overlay and Infinite Menu Background Animation

From our sponsor: Looking for an intuitive whiteboard style project management tool? Give Shortcut a try for free.

Today I’d like to share a little menu effect with you. It is composed of two things which is an SVG path overlay animation when it opens (or closes) and an infinite CSS powered background animation of an image grid.

Nothing special really, but I enjoyed putting it together and hopefully it is somehow useful to you!

The SVG path animation for the overlay is based on this demo by Sebastien Gilbert which is a good starter for a nice motion. If you need to adjust paths, I can recommend this fantastic path editor tool by Yann Armelin.

The infinite background animation of the menu is made with a CSS animation. The trick is to have a repeated set of images and once we translate to the visually equal part, we restart the animation.

.tiles {
	position: absolute;
	left: 50%;
	top: 50%;
	height: 150vh;
	display: flex;
	opacity: 0.5;
	flex-direction: column;
	justify-content: center;
	transform: translate3d(-50%,-50%, 0) rotate(22.5deg);
}

.tiles__line {
	display: flex;
	transform: translateX(25%);
	animation: runner 10s linear infinite;
}

.tiles__line:nth-child(2) {
	animation-duration: 16s;
}

.tiles__line:nth-child(3) {
	animation-duration: 22s;
}

@keyframes runner {
	to {
		transform: translateX(-25%);
	}
}

Check out the CSS-Only Marquee Effect, if you’d like to understand the details of this.

And this is how it all comes together:

Hope you enjoy this and find it useful!