Animate SVG Elements With Vanilla JavaScript – Walkway

Preview:

Description:

A tiny Javascript library to animate SVG paths, lines, and polylines just like you would draw on paper.

How to use it:

1. Download and import the Walkway.js library.

<script src="./src/walkway.js"></script>

2. Draw an SVG image on document ready.

var svg = new Walkway('#mySVG');
svg.draw(function() {
  console.log('Finished!');
});

3. Set the animation speed.

var svg = new Walkway({
    selector: '#mySVG',
    duration: '2000',
});

4. Apply an easing function to the animation. Available easings:

• linear
• easeInQuad
• easeOutQuad
• easeInOutQuad
• easeInCubic
• easeOutCubic
• easeInOutCubic
• easeInQuart
• easeOutQuart
• easeInOutQuart
• easeInQuint
• easeOutQuint
• easeInOutQuint

var svg = new Walkway({
    selector: '#mySVG',
    easing: 'easeOutQuint',
});