From our sponsor: Chromatic - Visual testing for Storybook, Playwright & Cypress. Catch UI bugs before your users do.
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);
})();
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);
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.
Source code isn’t available: 404 error
Sorry about that! The ZIP file is now available for download 🙂
great! thx
Hey there,
Been playing around with this, though I seem to be running into an issue. Setting the position to fixed, doesn’t actually make a fixed position container.
An example codepen: http://codepen.io/saurian-incantations/pen/RGYNjq
I’m certain that I’m missing something fundamental, but nay help is appreciated.
And, I see my problem, not including the decolines.css – clearly something fundamental.
Hi Josh, thanks for pointing that out, I’ve added a note to the article! Cheers, ML
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 🙂
Hi Andrew, you can see an example here (at the end of the js code): http://codepen.io/pmbotelho/full/dpgOLx/
Cheers.
Thanks Pedro!
This is so cool, thank you for sharing! It would be nice if there was a way to set different opacity values for lines!
I see all your demo and they are all nice. I like demo 3 and 6. It look fabulous.
This is so neat. I wish I was much much younger. Too many cool stuff and not enough time. I am simply amazed.
Thanks for sharing yhis amazing useful content.
Every single time…
http://prntscr.com/d36pl8
how to put this codes on existing wordpress site? thanks 😀
Thanks! it s amazing 🙂
do you think u can use it also to make diagonal lines ??
How can i get the linemaker on multiple classes?
Genius as always… Thank you for the wonderful work.
Hi there
so awesome!! thank you very much! maybe you can tell me how to hide certsin lines on mobile?
thanks!!!