Animate SVG Elements With Vanilla JavaScript – Walkway

Category: Animation , Javascript , Recommended | October 31, 2022
Author:ConnorAtherton
Views Total:89 views
Official Page:Go to website
Last Update:October 31, 2022
License:MIT

Preview:

Animate SVG Elements With Vanilla JavaScript – Walkway

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',
});

You Might Be Interested In:


Leave a Reply