https://github.com/chrisgannon/SVG2GIF
Convert GreenSock SVG Timeline Animations to GIF
https://github.com/chrisgannon/SVG2GIF
converter gif greensock javascript
Last synced: 3 months ago
JSON representation
Convert GreenSock SVG Timeline Animations to GIF
- Host: GitHub
- URL: https://github.com/chrisgannon/SVG2GIF
- Owner: chrisgannon
- Created: 2016-12-06T16:58:33.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2021-07-08T09:14:30.000Z (over 4 years ago)
- Last Synced: 2024-08-10T14:13:57.120Z (about 1 year ago)
- Topics: converter, gif, greensock, javascript
- Size: 229 KB
- Stars: 85
- Watchers: 7
- Forks: 13
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# SVG2GIF
Convert GreenSock SVG Timeline Animations to GIF
## Notes
* Add ```SVG2GIF.min.js``` to your project using a normal JavaScript ```script``` tag.
* SVG2GIF renders SVG animations animated inline with GreenSock TimelineMax.
* You must add a class name to the SVG tag you want to convert.
* If you don't already, you should create a main timeline and add all and any of your timelines to it
* Ensure that ```repeat:0``` is set on your timelines so that it plays only once
* In the ```vars``` for the main parent timeline add in ```SVG2GIF:true``` - this notifies SVG2GIF that this is the timeline you wish to render. E.g. ```var mainTl = new TimelineMax({repeat:0, SVG2GIF:true});```
### SVG2GIF uses the following libraries
* [HTML2Canvas](https://github.com/niklasvh/html2canvas)
* [Gif.js](https://jnordberg.github.io/gif.js/)
* GreenSock's [Draggable](http://greensock.com/draggable)
* GreenSock's [TweenMax](http://greensock.com/tweenmax)
### Demo
* See it in action on CodePen [here](http://codepen.io/chrisgannon/pen/0e3f0e3af985e1c6949e70e4c8ed4df7)
* Demo video on [YouTube](https://www.youtube.com/watch?v=n8FDiovShJI)