Transform
SVG
<svg viewBox="-5 -50 100 100" xmlns="http://www.w3.org/2000/svg">
<rect id="ex1" x="-3" y="-3" width="6" height="6" />
</svg>
const ex1 = new SVGAnimationPlayer();
ex1.add({
object: '#ex1',
animation: {
transform: {
range: [0, 3],
translate: {
x: {
to: 80,
},
y: t => 10 * Math.sin(4 * t),
},
rotate: {
to: 2 * Math.PI,
},
scale: t => Math.sin(t) + 1,
},
},
});
Other properties
SVG
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<rect id="ex2" x="40" y="40" width="20" height="20" fill="none" stroke="#000" />
</svg>
const ex2 = new SVGAnimationPlayer();
ex2.add({
object: '#ex2',
animation: {
width: {
range: [0, 4],
value: {
to: 50,
},
},
'stroke-width': {
range: [0, 4],
value: t => 1 + Math.sin(t),
},
},
});
Multi stage
SVG
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<rect id="ex3" x="10" y="10" width="10" height="10" />
</svg>
const ex3 = new SVGAnimationPlayer();
ex3.add({
object: '#ex3',
animation: {
transform: [{
range: [0, 1],
translate: {
x: {
to: 70,
},
},
}, {
range: [1, 2],
translate: {
y: {
to: 70,
},
},
}, {
range: [2, 3],
translate: {
x: {
to: 0,
},
},
}, {
range: [3, 4],
translate: {
y: {
to: 0,
},
},
}],
},
});
Multi objects
SVG
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<rect id="ex4-1" x="10" y="10" width="10" height="10" />
<rect id="ex4-2" x="10" y="30" width="10" height="10" />
<rect id="ex4-3" x="10" y="50" width="10" height="10" />
</svg>
const ex4 = new SVGAnimationPlayer();
ex4.add({
object: '#ex4-1',
animation: {
transform: {
range: [0, 1],
translate: {
x: {
to: 70,
},
},
},
},
}, {
object: '#ex4-2',
animation: {
transform: {
range: [0.2, 1.2],
translate: {
x: {
to: 70,
},
},
},
},
}, {
object: '#ex4-3',
animation: {
transform: {
range: [0.4, 1.4],
translate: {
x: {
to: 70,
},
},
},
},
});
Easings
SVG
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<rect id="ex5-1" x="10" y="10" width="5" height="5" />
<rect id="ex5-2" x="10" y="20" width="5" height="5" />
<rect id="ex5-3" x="10" y="30" width="5" height="5" />
<rect id="ex5-4" x="10" y="40" width="5" height="5" />
<rect id="ex5-5" x="10" y="50" width="5" height="5" />
<rect id="ex5-6" x="10" y="60" width="5" height="5" />
<rect id="ex5-7" x="10" y="70" width="5" height="5" />
<text x="30" y="14" font-size="4">linear</text>
<text x="30" y="24" font-size="4">easeInQuad</text>
<text x="30" y="34" font-size="4">easeOutQuad</text>
<text x="30" y="44" font-size="4">easeInOutQuad - default easing</text>
<text x="30" y="54" font-size="4">easeInCubic</text>
<text x="30" y="64" font-size="4">easeOutCubic</text>
<text x="30" y="74" font-size="4">easeInOutCubic</text>
</svg>
const ex5 = new SVGAnimationPlayer();
const obj1 = {
object: '#ex5-1',
animation: {
transform: {
range: [0, 2],
translate: {
x: {
to: 80,
easing: 'linear',
},
},
},
},
};
const obj2 = {
object: '#ex5-2',
animation: {
transform: {
range: [0, 2],
translate: {
x: {
to: 80,
easing: 'easeInQuad',
},
},
},
},
};
const obj3 = {
object: '#ex5-3',
animation: {
transform: {
range: [0, 2],
translate: {
x: {
to: 80,
easing: 'easeOutQuad',
},
},
},
},
};
const obj4 = {
object: '#ex5-4',
animation: {
transform: {
range: [0, 2],
translate: {
x: {
to: 80,
easing: 'easeInOutQuad', // default easing
},
},
},
},
};
const obj5 = {
object: '#ex5-5',
animation: {
transform: {
range: [0, 2],
translate: {
x: {
to: 80,
easing: 'easeInCubic',
},
},
},
},
};
const obj6 = {
object: '#ex5-6',
animation: {
transform: {
range: [0, 2],
translate: {
x: {
to: 80,
easing: 'easeOutCubic',
},
},
},
},
};
const obj7 = {
object: '#ex5-7',
animation: {
transform: {
range: [0, 2],
translate: {
x: {
to: 80,
easing: 'easeInOutCubic',
},
},
},
},
};
ex5.add(obj1, obj2, obj3, obj4, obj5, obj6, obj7);
Instant
SVG
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<rect id="ex6" x="10" y="10" width="30" height="30" />
</svg>
const ex6 = new SVGAnimationPlayer();
ex6.add({
object: '#ex6',
animation: {
width: [
{
range: 1,
value: 20,
},
{
range: 2,
value: 40,
},
{
range: 3,
value: 10,
},
{
range: 4,
value: 50,
},
],
},
});
Infinite
SVG
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<rect id="ex7" x="45" y="45" transform="translate(30, 0)" width="10" height="10" />
</svg>
const ex7 = new SVGAnimationPlayer();
ex7.add({
object: '#ex7',
animation: {
transform: {
translate: {
x: t => 30 * Math.cos(t),
y: t => 30 * Math.sin(t),
},
},
},
});
Add programmatically
SVG
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<rect class="ex8" y="10" x="10" width="5" height="5" />
<rect class="ex8" y="18" x="10" width="5" height="5" />
<rect class="ex8" y="26" x="10" width="5" height="5" />
<rect class="ex8" y="34" x="10" width="5" height="5" />
<rect class="ex8" y="42" x="10" width="5" height="5" />
<rect class="ex8" y="50" x="10" width="5" height="5" />
<rect class="ex8" y="58" x="10" width="5" height="5" />
<rect class="ex8" y="66" x="10" width="5" height="5" />
<rect class="ex8" y="74" x="10" width="5" height="5" />
</svg>
const ex8 = new SVGAnimationPlayer();
const rects = Array.from(document.getElementsByClassName('ex8'));
rects.forEach((rect, index) => {
ex8.add({
object: rect,
animation: {
transform: {
range: [index / 5, (index / 5) + 1],
translate: {
x: {
to: 80,
},
},
},
},
});
});