Book Image

Responsive Web Design with HTML5 and CSS3, Second Edition

By : Ben Frain
5 (1)
Book Image

Responsive Web Design with HTML5 and CSS3, Second Edition

5 (1)
By: Ben Frain

Overview of this book

Table of Contents (17 chapters)
Responsive Web Design with HTML5 and CSS3 Second Edition
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Animating SVG with JavaScript


With an SVG inserted into the page via an object tag or inline, it's possible to manipulate the SVG directly or indirectly with JavaScript.

By indirectly, I mean it's possible with JavaScript to change a class on or above the SVG that would cause an CSS animation to start. For example:

svg {
    /* no animation */
}

.added-with-js svg {
    /* animation */
}

However, it's also possible to animate an SVG via JavaScript directly.

If animating just one or two things independently, it's probable things would be lighter, code wise, by writing the JavaScript by hand. However, if you need to animate lots of elements or synchronize the animation of elements as if on a timeline, JavaScript libraries can really help. Ultimately, you will need to judge whether the weight of including the library in your page can be justified for the goal you are trying to achieve.

My recommendation for animating SVGs via JavaScript is the GreenSock animation platform (http://greensock.com...