Web Animation using JavaScript: Develop & Design (Develop and Design)

with solid green. Additionally, the rectangle has a red border with a thickness of 5px.

There are many other SVG-specific styling properties. For now, it’s simply important
for you to know that they exist so you’ll pay extra attention when trying to animate CSS
properties on SVG elements.

    Note

Refer   to  the “Wrapping   up” section of  this    chapter for information on  where

to  find    a   full    listing of  SVG styling properties.

Support for SVG

Out-of-the-box support for SVG element animation isn’t great: neither jQuery nor CSS
offers complete support for animating SVG-specific styling properties and presentational
attributes. Further, CSS transitions can’t animate SVG elements at all on Internet Explorer
9, and CSS can’t be used to apply transform animations to SVG elements on any version
of Internet Explorer.

To gain comprehensive SVG animation support, use either a dedicated SVG library or
an animation library that has built-in support for SVG elements. One noteworthy
dedicated SVG library is Snap.svg. It probably won’t surprise you to learn that Velocity.js,
the JavaScript animation library you’ve been using throughout this book, provides full
support for SVG element animation.

    Note

Go  to  SnapSVG.io  to  download    the Snap.svg    library.

SVG animation

SVG elements might never be the backbone of your UI, but they’re certainly appropriate
for spicing up the parts of your page that you’d normally fill with static images. Uses for
SVGs include:

    Buttons with    intricate   animation   sequences   that    are triggered   when    users   hover   and

click.

    Unique  loading status  graphics    that    replace the all-too-common  rotating    indicator

GIF.

    Company logos   whose   individual  parts   animate together    upon    page    load.

This    last    use case    is  explored    in  more    detail  later   in  this    chapter.

Passing in properties

With Velocity, SVG properties are animated in the same way that standard CSS properties
are. Pass the appropriate properties and their desired end values into Velocity’s properties
object: