SVG Overlay and Infinite Menu Background Animation

A little menu effect with an SVG overlay and an infinite background CSS animation.
Theodore_feat

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!

Tagged with:

Mary Lou

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

http://www.codrops.com

Stay up to date with the latest web design and development news and relevant updates from Codrops.