https://github.com/averagemarcus/adventuresinsvg
Experimenting with SVG animation
https://github.com/averagemarcus/adventuresinsvg
Last synced: 6 months ago
JSON representation
Experimenting with SVG animation
- Host: GitHub
- URL: https://github.com/averagemarcus/adventuresinsvg
- Owner: AverageMarcus
- Created: 2015-11-28T14:03:49.000Z (over 10 years ago)
- Default Branch: gh-pages
- Last Pushed: 2015-11-28T15:27:50.000Z (over 10 years ago)
- Last Synced: 2025-04-06T05:43:37.983Z (over 1 year ago)
- Language: HTML
- Size: 637 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# AdventuresInSVG
Experimenting with SVG animation
# What & why?
For a while now I've been a little fascinated with SVGs and the ability to animate them, mainly thanks to [@benfoxall](https://github.com/benfoxall) and [this repo](https://github.com/benfoxall/logo-hacks).
I wanted to find out how semi-complex animations could be achieved and try and pick the "best" way of doing it.
I have split out the CSS and JS into the HTML page rather than within the SVG tag for better readability.
Here are my results so far...
# Animating with JavaScript
See: [AnimatingWithJavaScript.html](http://averagemarcus.github.io/AdventuresInSVG/AnimatingWithJavaScript.html)
```diff
+ Easy to change the routine of the animation
+ The timings can be changed on-the-fly
- A bit of CSS is needed to achieve it easily
- May not perform well on load-end devices if the amount of work done in JS is large
```
# Animating with CSS
See: [AnimatingWithCSS.html](http://averagemarcus.github.io/AdventuresInSVG/AnimatingWithCSS.html)
```diff
+ Few lines of code needed to animate something
+ Animations are smooth
- Timings are hard and not very flexible.
- Cannot change the timing on-the-fly
```
# Animating with Promises (JS)
See: [AnimatingWithPromises.html](http://averagemarcus.github.io/AdventuresInSVG/AnimatingWithPromises.html)
*Note:* I used [Q](https://github.com/kriskowal/q) for this.
```diff
(All the same as JS above)
+ Timings between animations can be varied
+ Nice, easy to read syntax
- Much more code
```