SpriteMeister Documentation (of the important parts)

SpriteMeister attributes

duration : duration for all frames, in seconds notation
paths : show colored points for every frame calculation
width : set width, other than 100px default width
cell : define SVG viewBox size
background-color : set background-color

SpriteMeister variables

n : framenumber
w : current sprite width
h : current sprite height

SpriteMeister functions

Can be used inside Template Literals Strings to calculate values for each frame.

attr( name , defaultValue ) - Returns attribute value from `<sprite-meister>` or template

round({ value, precision = 0 }) - Returns rounded value by precision

pulse: ({ start:10, mid:50, [end = start] }) - Returns a value on a linear path, to end and back to start

${setv1(pulse({start:10,mid:80}),"pulse from start to end ")} frame:${n} v1:${v1}

ease: ({ distance, [frames = this.steps / 2], [delay = q1] }) - Returns a value on a easing path, 0 to distance and back to 0

${setv1(100-ease({distance:80}),"")} frame:${n} v1:${int(v1)}

scale: ({ start:1, mid:5, [end = start], [center = 50] }) - Returns a pulsating SVG matrix definition for scaling SVG groups

${setv2(scale({start:1,mid:5}),"")} ${v2}

circlepath({ radius:n}} - Returns object {x,y} for each frame

${setv1(circlepath({radius1:25}),"calc x,y circle mottion for every frame")} x:${v1.x} y:${v1.y}

arcpath({ start:[x,y] , end:[x,y] , control:[dx,dy] }} - Returns object {x,y} for each frame

${setv1(arcpath({start:[5,15],end:[95,95],control:[50,-50],c2:[50,20,40,150]}))} n:${framenr} x:${v1.x} y:${v1.y}