SVG Path Animation with Pure JavaScript – Segment.js

Category: Animation , Javascript , Recommended | August 3, 2018
Author: lmgonzalves
Views Total: 5,008
Official Page: Go to website
Last Update: August 3, 2018
License: MIT

Preview:

SVG Path Animation with Pure JavaScript – Segment.js

Description:

Segment.js is a lightweight JavaScript library used to draw and animate the stroke on every <path> inside the selected <svg> element.

Basic usage:

Download and insert the Segment.js into your document.

<script src="dist/segment.min.js"></script>

Initialize a new instance on the element you want to animate.

var myPath = document.getElementById("my-path"),
    segment = new Segment(myPath);

segment.draw("25%", "75% - 10", 1);

Parameters:

  • begin:0 – Path length to start drawing.
  • end: 100% – Path length to finish drawing.
  • duration: 0 – Duration (in seconds) of the animation.
  • options: null – Options for animation in object notation.
draw(begin, end, duration, options)

All options:

  • delay: 0 – Waiting time (in seconds) to start drawing.
  • easing: linear – Easing function (normalized).
  • circular: false – If true, when the stroke reaches the end of the path it will resume at the beginning. The same applies in the opposite direction.
  • callback: null – Function to call when the animation is done.

Changelog:

v1.1.3 (08/03/2018)

  • More options and functions.

You Might Be Interested In:


Leave a Reply