Animations
Custom SVG SMIL animations on layers and shapes. For layer appear/disappear, see Effects.
Animation Functions
| Function | Description |
|---|---|
animateRotate() | Rotation animation |
animateMotion() | Move along SVG path |
animateOpacity() | Animate transparency |
animateColor() | Color animation on shapes/gradients |
animateZoom() | Zoom in/out |
Common Parameters
| Param | Description |
|---|---|
dur | Duration (e.g., '3s') |
from / to | Start and end values |
repeatCount | Number of repeats ('indefinite') |
fill | 'freeze' (hold) or 'remove' (snap
back) |
Examples
Rotate Logo
$(function() {
var img = $.image({ href: 'logo.png', width: 200, height: 200 }).addTo('svg');
img.animateRotate({ from: 0, to: 360, dur: '3s', repeatCount: 'indefinite'});
});Move Along Path
$(function() {
var ball = $.circle({ cx: 0, cy: 0, r: 20, fill: 'red'}).addTo('svg');
ball.animateMotion({
path: 'M 100,200 C 200,100 400,100 500,200',
dur: '4s', repeatCount: 'indefinite'});
});Related Pages
- Transitions & Effects — layer appear/disappear
- Shapes & Gradients — elements to animate
- Layers Overview — common attributes