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

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 leanirng CSS now.

Feedback 17

    • 5

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

  1. 7

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

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

    • 12

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

Follow this discussion

Leave a Comment