Implementation example: Animated logos
High-resolution site logos that animate into place upon page load are ideal targets for SVG
implementation. Suppose you want to crudely replicate the MasterCard logo, which
consists of two overlapping circles of different colors. If you were to animate this logo
into place using Velocity, you’d start with an SVG canvas defined as follows:
Click here to view code image
<svg version=“1.1” width=“500” height=“500”
xmlns=“http://www.w3.org/2000/svg”>
<circle id=“circleLeft” cx=“100” cy=“100” r=“30” style=“fill: red” />
<circle id=“circleRight” cx=“100” cy=“100” r=“30” style=“fill: orange” />
This creates two overlapping circles with identical radii. Next, you’d animate the circles
outward from their origins so that they overlap only slightly when they’re done animating:
Click here to view code image
// Move one circle toward the left
$(“#circleLeft”).velocity({ cx: “-=15px” }, { easing: “spring” });
// Move one circle toward the right
$(“#circleRight”).velocity({ cx: “+=15px” }, { easing: “spring” });
Here, the left circle is animated 15 pixels leftward (using the "-=" operator to instruct
Velocity to decrement the circle’s current value) and the right circle is animated 15 pixels
rightward. The spring easing provides added flair by making the circles bounce away
from one another with propulsive force.