svg-line-animator v0.0.0

svg-line-animator

svg-line-animator is a SVG line animation lib. Easy to make a timeline set with async/await.

import SVGLineAnimator from 'svg-line-animator';

( async() => {

	const $line1 = document.getElementById( 'line1' );
	const $line2 = document.getElementById( 'line2' );
	const $line3 = document.getElementById( 'line3' );

	function easeOutBack( x ) {

		const c1 = 1.70158;
		const c3 = c1 + 1;

		return 1 + c3 * Math.pow( x - 1, 3 ) + c1 * Math.pow( x - 1, 2 );

	}

	const lineAnimator1 = new SVGLineAnimator( $line1, 2000, SVGLineAnimator.EASE.sineOut );
	const lineAnimator2 = new SVGLineAnimator( $line2, 2000, SVGLineAnimator.EASE.exponentialOut );
	const lineAnimator3 = new SVGLineAnimator( $line3, 2000, easeOutBack );

	await lineAnimator1.play();
	await lineAnimator2.play(); // wait for anim1 end, then start anim2
	await lineAnimator3.play(); // wait for anim2 end, then start anim3

	console.log( 'done' );

} )();

examples

• basic