SVG.js Animation Examples

This provides examples of SVG.js animations. They use element.animate() to change element attributes values and method values over time.

01 Animate Attributes This introduces the SVG.js elem.animate() object that can animate essentially all attributes. IE11/Edge CH55 FF52 05/17
02 Animatable methods All attr values are animatable. However, this shows examples of all methods available in SVG.js that are animatable:
fill(), stroke(), opacity(), move(), dmove(), dx(), dy(), size(), width(), height(), radius(), center(), cx(), cy(), x(), y(), transform(), translate(), rotate(), scale(), skew(), flip(), plot(), from(), to()
IE11/Edge CH55 FF52 05/17
02a Animate Easing SVG.js includes the following animation easing types: "<>" (ease in and out, default), ">" (ease out), "<" (ease in), "-" (linear), or a function. The difference in performance of each is shown. IE11/Edge CH55 FF52 05/17
02b Animate Pause/Play This is a continous running animation, using method move() at a rectangle. Then it smoothly returns back to its original values, using the loop(true,true).
It includes controls pause(), play().
IE11/Edge CH55 FF52 05/17
03 Draw Spiraled Lines This is an example of the SVG.js animate during() function. This example animates lines drawn along a spiral using a setter function. IE11/Edge CH55 FF52 05/17
04 SVG.js Custom Easing This example shows custom functions performance, replacing SVG.js easing types. Custom functions: mathPow, sineCircle, sineHalf, and sineFull. IE11/Edge CH55 FF52 05/17
05 Animate Drop & Roll Animation Drop or Roll. This example animates a circle's cx(roll) or cy(drop) values. The object will seem to be effected by some force to move it, then bounce a few times at its destination. IE11/Edge CH55 FF52 05/17
06 Sine Wave - Full Cycle Continuous running animation of a sine wave, using parametric equation to build a polyline. It runs a full cycle. IE11/Edge CH55 FF52 05/17
07 Animate Follow Path An ellipse element follows a path, aligning along the path tangent. IE11/Edge CH55 FF52 05/17
08 Draw SVG Shapes This demonstrates how to animate the drawing of typical svg shapes: circle, ellipse, rect, path, and polygon. IE11/Edge CH55 FF52 05/17
09 Animate Transforms This example rotates and transforms two <g> elements and draws an attached line. The transformation moves a circle and attached line counter-clockwise around the edge. IE11/Edge CH55 FF52 05/17
10 Pendulum Clock Pendulum uses 4 cycles of linear easing. Two lines are rotated to simulate a clock's pendulum and its second-hand. IE11/Edge CH55 FF52 05/17
11 Draw SVG Elements Simultaneously Various animations are running smoothly at the same time, and in sequence. Using a polyline to simulate drawing. This example draws circles, lines, and ellipse. IE11/Edge CH55 FF52 05/17
12 Move SVG Element To Target This demonstrates how to animate the movement of an element to another location: circle, ellipse, rect, path, polygon, and text. The element's center moves to a specific target point, then returns to its original location. IE11/Edge CH55 FF52 05/17
13 Click, Scoot, Remove Animation Creates inline svg with random circles, ellipses, polygons, and rectangles and attaches a click event to each element. Clicking on an element animates its translation off the page, and removes it. IE11/Edge CH55 FF52 05/17
14 Animate Polygon Sprites There are 30 sprites placed in a <defs>. Each sprite is comprised of a <g> element containing polygons created with their centers at (0,0) and sized at 1 pixel. Therefore they can be seamlessly transformed, making them ideal for animations. IE11/Edge CH55 FF52 05/17
15 Animate Image Replacement Smoothly animate image replacement, via fade-out original image and fade-in new image. IE11/Edge CH55 FF52 05/17
16 Animate Flow Arrows Typically represents flow in piping. The piping is an SVG path, and each arrow line is a 3-point path that follows that path around corners. IE11/Edge CH55 FF52 04/18