SVGAnimFrames

I created SVGAnimFrames because I wanted to be able to make frame by frame animations within Gravit Designer using 1 line of code.

License

MIT

Version

0.0.2

How To Use:

1. First you need to design your animation using a vector editor. I recommend Gravit Designer!
   
   
2. Make sure ALL the frames that will be animated are inside a svg group element. ex. <g clip-path="url(#_clipPath_hello)">.
   See index.html as an example.
   
   
3. Export your SVG and then grab it's code (If you don't know how you can load the SVG in your browser you can use WeaveShare to grab it's code as it needs to be embedded in order for SVGAnimFrames to grab it's frames).
   
   
4. Add SVGAnimFrames script!
   ex. <script src="SVGAnimFrames.js"></script>
   before your closing body tag.
   
   
5. Now in a new script before your closing body tag.
   You can run SVGAnimFrames with 1 line of code.
   SVGAnimFrames("#animate svg", "repeat", "40", "1000");.
   
   If you do not want your animation to repeat replace repeat with no-repeat
   
   40 tells SVGAnimFrames how many milliseconds to change to the next frame.
   
   100 tells SVGAnimFrames how many milliseconds the animation waits to start the animation over.

Development

Want to contribute? Great!

As of November 6, 2019 SVGAnimFrames is no longer an active project.
All updates as of that date and on are solely contributor based implementations.

You can submit a pull request or simply share the project :)

Of course SVGAnimFrames is free and open source, so you can always fork the project and have fun :)

If SVGAnimFrames was at all helpful for you. You can show your appreciation by Donating via SquareCash and/or PayPal

PS: Learn how you can do this with GSAP!!