Moveit svg path animator
HTML JavaScript CSS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
sample
.gitignore new Sample provided Apr 22, 2016
LICENSE
README.md Update readme Jan 21, 2017
index.html
license.txt new Sample provided Apr 22, 2016
moveit-demo.zip
moveit.js

README.md

Moveit SVG path animator

Moveit is in active development phase. It is a library that you can use in order to animate SVG path in your html.

Move it is an open source javascript library to animate SVG path using SVG stroke dasharray and stroke dashoffset attributes.

  • Pure javascript
  • Utilizing css transitions
  • No Javascript animation code

Quick start

Checkout these two examples to see how the effect works.

  1. SVG animated burger menu
  2. Animated success Icon

Include moveit.js in your project. Then in your html's body add following code:

<svg width="400" height="400">
  <circle id="circle" cx="100" cy="100" r="40" fill="none" stroke="#000" stroke-width="4"></circle>
</svg>

Now in javascript add following code. It first set the initial size of the circle path and then animates it.

Moveit.put(circle, {
  start: '0%',
  end: '14%'
});
Moveit.animate(circle, {
  start: '0%',
  end: '100%',
  duration: 0.6,
  delay: 0,
  timing: 'ease-out'
});

Table of Contents

Usage

Setting Start and end of the visible portion of the full svg path:

Moveit.put('YOUR SVG PATH', {
  start: 'start perentage of the path%',
  end: 'end percentage of the path%',
  duration: [Duration in second(s)],
  timing: 'ease-in' | 'ease-out' | 'ease-in-out' | 'cubic-bezier'
});

Animating SVG path:

Moveit.put('YOUR SVG PATH', {
  start: '0%',
  end: '14%'
});

Frequently Asked Questions

  • Can I use external javascript aimation libraries to use different timing functions such as Elasticity, etc?
    • Due to performace, we avoided implementing this. At the moment we only support css timing functions including ease-in, ease-out, ease-in-out, cubic-bezier.

Support, Questions, Contributions or Feedback?

The lead maintainer is Kodhus Kodhus, please send any questions to kodhus@kodhus.com.