Snap.svg Animation Examples

This provides examples of Snap.svg animations. They use element.animate() to change element attributes, and Snap.animate() to run an animated setter function. Note: Snap.animate() includes the stop/pause/resume functions.

01 SetInterval: Frames Per Second Basic Animation - Change a value by a small amount for each frame using setInterval. Rotating 2 semi circles. IE11/Edge CH55 FF52 04/17
02 Animate Element Attributes This introduces the Snap elem.animate() function that animates the element attribute(s) IE11/Edge CH55 FF52 04/17
03 Draw Spiraled Lines This introduces the Snap.animate() function. This example animates lines drawn along a spiral using a setter function. IE11/Edge CH55 FF52 04/17
04 Snap mina Easing This example shows the differences in performance between Snap's mina easing functions: mina.linear, mina.easeout, mina.easein, mina.easeinout, mina.backin, mina.backout, mina.elastic, and mina.bounce . IE11/Edge CH55 FF52 04/17
04 Snap Custom Easing This example shows custom functions performance, replacing Snap's mina easing functions: quad, sineCircle, sineHalf, and sineFull. IE11/Edge CH55 FF52 04/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 04/17
06 Sine Wave I - Full Cycle Continous running animation of a sine wave, using parametric equation to build a polyline. It runs a full cycle using mina.linear. IE11/Edge CH55 FF52 04/17
06 Sine Wave II - Full Cycle Continous running animation of a sine wave, using parametric equation to build a polyline. It runs a full cycle, replacing mina.linear with a sine function. IE11/Edge CH55 FF52 04/17
07 Animate Follow Path An ellipse element follows a path, aligning along the path tangent. IE11/Edge CH55 FF52 04/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 04/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 04/17
10 Pendulum Clock I Pendulum follows two cycles(tick/tock). Two lines are rotated to simulate a clock's pendulum and its second-hand. IE11/Edge CH55 FF52 04/17
10 Pendulum Clock II Pendulum uses single animation with a custom easing function. This replaces 2 cycles of mina.linear. Two lines are rotated to simulate a clock's pendulum and its second-hand. IE11/Edge CH55 FF52 04/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 04/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 04/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 04/17
14 Animate from/to Values The Snap.animate(from, to, setter, duration, [easing], [callback]) provides the ability to include from/to as a number or array. Examples are included that shows setting these values. IE11/Edge CH55 FF52 04/17
15 Animate & Set Creates inline svg with random circles, ellipses, polygons, and rectangles and places them in a set. Animation is applied to all elements in the set: Snap.set(). IE11/Edge CH55 FF52 04/17
16 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 04/17