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
Checkout these two examples to see how the effect works.
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'
});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%'
});
- 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.
The lead maintainer is Kodhus Kodhus, please send any questions to [email protected].