LineAnimate.js

LineAnimate.js is a small JavaScript library that renders a bar chart and animates it's entrance.


Demos

Uses the wave generator. Animates as soon as the container enters the page.


    $("#demo1").lineAnimate({
        "lines" : $.lineAnimate.waveLines()
    });
    

Uses the wave generator creates 2 peaks, uses a range of different colors and requires manual start.


    $("#demo2").lineAnimate({
        "lines" : $.lineAnimate.waveLines({
            "peaks" : 2,
            "color" : ["00FF00","FFFF00","CC33FF","00CCFF"]
        }),
        "start" : "manual"
    });
    

Uses the wave generator. Has a line position of left and requires manual start.


    $("#demo3").lineAnimate({
        "lines" : $.lineAnimate.waveLines({
            "numberOfLines" : 9
        }),
        "start" : "manual",
        "position" : "left"
    });
    

Defines an array of custom lines and requires manual start.


    $("#demo4").lineAnimate({
        "lines" : [
            {
                "size" : 30,
                "color" : "B20000"
            },
            {
                "size" : 70,
                "color" : "FF9900"
            },
            {
                "size" : 55,
                "color" : "006600"
            }
        ],
        "start" : "manual",
    });
    

Source Code

View the source code on GitHub


Installation

Download the latest release of LineAnimate.js

Once you have downloaded the the JS and CSS files stick them in your HTML. LineAnimate.js requires jQuery

    <head>
        <link rel="stylesheet" type="text/css" href="jquery.line.animate.min.js" />
    </head>
    <body>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="jquery.line.animate.min.js"></script>
    </body>

Browser Support

LineAnimate.js will work in all browsers. Browser's that do not support CSS3 will not animate their enterance but the lines will still render.


Basic Usage

Use a jQuery selector to find the containing element and call the lineAnimate plugin to render the bar chart.

    <div id="lineanimate"></div>
				
    <script type="text/javascript">
        $("#lineanimate").lineAnimate({
            "lines" : $.lineAnimate.waveLines();
        });
    </script>

Options


lines

An array of line objects that are to be rendered.

    $("#lineanimate").lineAnimate({
        "lines" : [
            {
                "size" : 50,
                "color" : "FF0000"
            },
            {
                "size" : 75,
                "color" : "000099"
            }
        ]
    });

The above example will render 2 lines, the first line will be red and 50% the second blue and 75%.

size an integer expressed as a percentage 0-100
color must be the 6 character hex value of the color.

There are two generators available that can produce this lines array.

-waveLines

Generates a wave of lines that go from the minimum up to the maximum,

    $("#lineanimate.lineAnimate({
        "lines" : $.lineAnimate.waveLines({
            "peaks" : 2,
            "minSize" : 50,
            "maxSize" : 100,
            "color" : ["FF0000","000099"],
            "numberOfLines" : 10
        })
    });

peaks - default 1 - the number of peaks in the wave
minSize - default 10 - the minimum size of any one line
maxSize - default 95 - the maximum size of any one line
color - default ["3385FF", "FF5C33"] - array of 6 character hex value of colors
numberOfLines - default 20 - a guide as to how many lines should be rendered in the wave

-randomLines

Generates an array of lines of random sizes.

    $("#lineanimate.lineAnimate({
        "lines" : $.lineAnimate.waveLines({
            "minSize" : 50,
            "maxSize" : 100,
            "color" : ["FF0000","000099"],
            "numberOfLines" : 10
        })
    });

minSize - default 10 - the minimum size of any one line
maxSize - default 95 - the maximum size of any one line
color - default ["3385FF", "FF5C33"] - array of 6 character hex value of colors
numberOfLines - default 20 - a guide as to how many lines should be rendered in the wave

start

'enter' (default) or 'manual'

    $("#lineanimate.lineAnimate({
        ...
        "start" : "enter"
    });

enter the lines will animate their entrance when the are visible in the viewport of the browser
manual the lines will animate when the start method is called on the plugin

    $("#lineanimate").lineAnimate("start");

ease

string defining the easing function, default is easeOutBounce

If a different value is defined will attempt to find the easing function from jQuery.easing otherwise will revert back to the default which is included in this library.

The easing function is only for non mobile devices where requestAnimationFrame is available. For mobile devices CSS transition is used where the easing is defined in the CSS, if you want a different easing for this then override in CSS.

delay

previous n or random n or n where n is a value in milliseconds

previous the animation of each line will start n milliseconds after the start of the previous line
random the animation of each line will start randomly between 0 and n milliseconds
n the animation of each line will be delayed by n milliseconds

position

bottom (default) or top or left or right

The position in which the lines will enter from the containing element

gap

integer in pixels, default 5

The gap between each line in pixels