Line Maker: Animated Decorative Lines

The Line Maker is a plugin for creating and animating decorative lines on websites. Inspired by site designs like ‘Uber Brand Experience’ and ‘Details’.

Today we’d love to share a little library with you that allows to add decorative lines to a webpage. The inspiration for this plugin comes from various designs that contain the line as a focal part of their layout. Examples are House of Biz, Uber Brand Experience, Details and Alexander Rochet (see images below). We wanted an easy way for adding all kinds of lines with different thicknesses and colors, in vertical or horizontal direction, and animate them. For animating the lines we use Julien Garnier’s anime.js, the lightweight JavaScript animation library.

LineMaker_ExampleSite_01

LineMaker_ExampleSite_02

LineMaker_ExampleSite_03

LineMaker_ExampleSite_04

The Line Maker

The line maker can be easily used to draw and animate simple lines. Here are the main options:

LineMaker.prototype.options = {
	// Where to insert the lines container.
	// element: the DOM element or a string to specify the selector, e.g. '#id' or '.classname'.
	// position: Whether to prepend or append to the parent.element
	parent: {element: document.body, position: 'prepend'},
	// position: if fixed the lines container will have fixed position.
	position: 'absolute',
	// The lines settings.
	lines: []
};

As for the lines, we can define a couple of options. Check out this example to see what can be done:

Here’s an example on how the line maker can be used (see it in action in demo 5):

(function() {
	var lineMaker = new LineMaker({
			position: 'fixed',
			lines: [
				{top: 0, left: '10%', width: 13, height: '100vh', color: '#5ccc93', hidden: true, animation: { duration: 1000, easing: 'easeInOutSine', delay: 400, direction: 'TopBottom' }},
				{top: 0, left: '30%', width: 16, height: '100vh', color: '#5ccc93', hidden: true, animation: { duration: 1000, easing: 'easeInOutQuad', delay: 100, direction: 'TopBottom' }},
				{top: 0, left: '50%', width: 9, height: '100vh', color: '#5ccc93', hidden: true, animation: { duration: 1000, easing: 'easeInOutQuad', delay: 0, direction: 'TopBottom' }},
				{top: 0, left: '70%', width: 30, height: '100vh', color: '#5ccc93', hidden: true, animation: { duration: 1000, easing: 'easeOutSine', delay: 400, direction: 'TopBottom' }},
				{top: 0, left: '90%', width: 17, height: '100vh', color: '#5ccc93', hidden: true, animation: { duration: 1000, easing: 'easeOutSine', delay: 300, direction: 'TopBottom' }}
			]
	});
	
	setTimeout(function() {
		lineMaker.animateLinesIn();
	}, 250);
})();

Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.

The methods are the following:

// Shows all lines with an animation.
// callback is optional.
lineMaker.animateLinesIn([callback]);

// Hides all lines with an animation.
// callback is optional.
lineMaker.animateLinesOut([callback]);

// Shows one line with an animation.
// lineIndex: index/position of the line in the LineMaker.options.lines array.
// animationSettings is optional: if not passed, the animation settings defined in LineMaker.options.lines for each line will be used.lineMaker.animateLineIn(lineIndex [,animationSettings]);

// Hides one line with an animation.
// lineIndex: index/position of the line in the LineMaker.options.lines array.
// animationSettings is optional: if not passed, the animation settings defined in LineMaker.options.lines for each line will be used.
lineMaker.animateLineOut(lineIndex [,animationSettings]);

// Shows all lines.
lineMaker.showLines();

// Hides all lines.
lineMaker.hideLines();

// Shows one line.
// lineIndex: index/position of the line in the LineMaker.options.lines array.
lineMaker.showLine(lineIdx);

// Hides one line.
// lineIndex: index/position of the line in the LineMaker.options.lines array.
lineMaker.hideLine(lineIdx);

// Creates a line.
// settings is optional: same settings passed in LineMaker.options.lines for one line.
lineMaker.createLine([settings]);

// Removes all lines.
lineMaker.removeLines();

// Removes a line.
// lineIndex: index/position of the line in the LineMaker.options.lines array.
lineMaker.removeLine(lineIdx);

LineMakerDemo6

Check out all the demos and see what you can achieve. We’ve just created a couple of examples, but applying different properties will give you a plethora of possibilities; i.e. think of multiple lines in the same position with different thicknesses and colors or simply one “line” that occupies half of the window; you can push the limits of this and create lots of different looks.

Don’t forget to include the decolines.css file for the necessary styles.

Browser Support:
  • ChromeSupported
  • FirefoxSupported
  • Internet ExplorerSupported from version 11+
  • SafariSupported
  • OperaSupported

Note that there are several ways to incorporate and animate lines on a website, i.e. using canvas, SVG or even gradients. For the sake of flexibility and consistency, we’ve opted for the HTML way by adding divisions and animating their transforms.

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Stay in the loop: Get your dose of frontend twice a week

👾 Hey! Looking for the latest in frontend? Twice a week, we'll deliver the freshest frontend news, website inspo, cool code demos, videos and UI animations right to your inbox.

Zero fluff, all quality, to make your Mondays and Thursdays more creative!

Feedback 19

Comments are closed.
    • And, I see my problem, not including the decolines.css – clearly something fundamental.

  1. This is superb. Really great!

    From the above it looks like it should be possible to set a different animateLineOut animation (i.e. delay / direction etc.) from the animation specified in CreateLine. My JS isn’t the best though so was wondering if you could give me an example of how setting an animation in here would look?

    lineMaker.animateLineOut(lineIndex [,animationSettings]);

    Apologies if this is a stupid question – just getting started with this stuff 🙂

  2. This is so cool, thank you for sharing! It would be nice if there was a way to set different opacity values for lines!

    • This is so neat. I wish I was much much younger. Too many cool stuff and not enough time. I am simply amazed.

  3. Thanks! it s amazing 🙂

    do you think u can use it also to make diagonal lines ??

  4. Hi there

    so awesome!! thank you very much! maybe you can tell me how to hide certsin lines on mobile?

    thanks!!!