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

LineMaker_800x600

View demo Download source

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

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.

View demo Download source

Previous:
Next:

Tagged with:

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.

View all contributions by

Website: http://www.codrops.com

Related Articles

Receive our bi-weekly Collective or blog updates right in your inbox.

Which newsletter would you like to receive?

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.