Line Maker: Animated Decorative Lines

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.

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);
})();

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);

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.

• 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.