Note:ACues and Incremental are not fully functional as of release 1.0. Look for them in a 1.1 release. For examples of cue-based and incremental animations, visit my homepage at sidewayss.com. Cue-based animations are for first-time visitors only.
The outermost class is AFrame. It has the play() method and contains the animation objects in its targets property.
targets contains instances of Easies or ACues.
class Easies contains a Set of Easy instances. Easies emulates a Set of Easys for the iterator, has(), add(), delete(), clear(), values(), and size. Each Easy has a linked list of legs, each with its own timing function.
Easies.prototype.targets is an array of MEaser instances. M is for "multi". Each MEaser has an easies property filled with references to Easys contained in this.easies.
Easy.prototype.targets is a Set of Easers.
class EBase and its subclasses run the calculations and apply the values during animation.
Easer and EaserByElm inherit from EBase. The "ByElm" class is for single elements and loopByElm
class MEBase inherits from EBase. It is the multi-ease subclass
class MEaser and MEaserByElm inherit from MEBase.
class PBase and its sub-classes: Prop, Bute, and HtmlButePrAtt wrap CSS properties and SVG/HTML attributes.
class Func and its sub-classes: Func, ColorFunc, and SRFunc wrap CSS/SVG functions
class AFrame
Public
properties
targets
Set(Easies, ACues)
get returns shallow copy as array
zero
number, read-only
the animation zero-timestamp in milliseconds
now
number, read-only
the current, relative animation timestamp
elapsed
number, read-only
milliseconds elapsed since the start of animation
useNow
bool
use performance.now() instead of timeStamp
oneShot
bool
true sets onArrival = E.empty
frameZero
bool
establish zero time in the first animation frame
initZero
bool
initialize elements when zero is established
syncZero
function
runs when zero is established
peri
function
runs once per #animate()
post
function
runs on arrival
keepPost
bool
default = false = one-shot this.post
status
int, read-only
this.#status, int enum generated from Easy.status
atOrigin
bool, read-only
this.#status == E.original
atInitial
bool, read-only
this.#status == E.initial
hasArrived
bool, read-only
this.#status == E.arrived
isPausing
bool, read-only
this.#status == E.pausing
isPlaying
bool, read-only
this.#status == E.playing
isEmpty
bool, read-only
this.#status == E.empty
fps
object, read-only
test results/data for baseline test
gpu
object, read-only
ditto for gpu test
methods
newCues()
ACues
adds a new ACues target
newEasies()
Easies
adds a new Easies target
addTarget()
undefined
adds a previously created target of either type
cutTarget()
bool
removes a target, returns true if deleted
clearTargets()
undefined
clears all targets
play()
Promise
plays the animation
pause()
int status enum
pauses the animation, promise.resolve(E.pausing)
stop()
int status enum
cancels the animation, promise.resolve(E.original)
cancel()
int status enum
cancels the animation, promise.resolve(status)
arrive()
int status enum
jumps to the end of the animation, E.arrived
init()
int status enum
initializes the animation, E.initial
fpsBaseline()
Promise
estimates a baseline browser frame rate
gpuTest()
Promise
runs a user-defined gpu stress test animation
static methods
fpsRound()
number
rounds to nearest "commonly used" frame rate
class ACues
Public
properties
cues
array: [{}]
read-write
pre
function
peri
function
alias callback, defaults to default()
post
function
read-write
elms
array: [Element]
elements for default()
prop
Prop
the property to set in default()
validate
bool
validate user cues or not, default = true
isACues
bool, read-only
always true
methods
default()
function
the default callback/peri function
newCue()
addCue()
splice()
push()
unshift()
insert()
"Protected"
methods
_next()
_resume()
_zero()
_reset()
_runPost()
class Easies
Public
constructor(arr)
Easies
validates arr as arrayish, converts it to set
Set emulation
size
int
this.#easies.size
has()
bool
this.#easies.has()
add()
undefined
this.#easies.add()
delete()
bool
this.#easies.delete() plus
clear()
undefined
clears #easies, #backup, #targets, #easy2Targets
values()
iterator
this.#easies.values()
[Symbol.iterator]()
iterator
this.#easies.values()
properties
easies
array
shallow copy of the internal set #easies
targets
array
shallow copy of the internal set #targets
status
int from enum
Math.max(...this.#easies.map(ez = ez.status))
oneShot
bool
peri
function
called once per frame
post
function
called once the Easies has finished
isEasies
bool, read-only
always true
instance methods
newTarget()
Measer
creates new MEaser, adds it to #targets, easy2Targets
addTarget()
Measer
adds existing MEaser to #targets, easy2Targets
cutTarget()
bool
did the target exist? was it deleted?
clearTargets()
undefined
clears #targets and the Sets in #easy2Targets.values()
init()
undefined
restore()
undefined
static methods
createFromTargets()
Easies
creates an Easies instance from [MEaser]
"Protected"
methods
_zero
undefined
write-only, initializes easies for fresh playback
_resume()
undefined
resumes after animation paused, AFrame.play()
_reset()
undefined
_runPost()
undefined
_next()
bool
runs every frame, returns (this.status != E.arrived)
class Easy
Public
properties
time
int ms
the base duration of one one-way play
wait
int ms
time to wait before starting the clock
loopWait
int ms
time between end of play and start of next
tripWait
int ms
time between outbound and auto-inbound
duration
int ms, read-only
full duration of one play, including round trip
delay
int ms, read-only
this.wait + this._firstLeg.wait
firstTime
int ms, read-only
the duration of the first play
loopTime
int ms, read-only
the duration of each play after the first
tripTime
int ms, read-only
the duration of the return aka inbound trip
plays
int
min = 1, number of times to play animation
oneShot
bool
clears targets upon arrival
roundTrip
bool
enables flipTrip, autoTrip, tripWait
flipTrip
bool
defaults to true, flips the curve for inbound
autoTrip
bool
defaults to true, auto-return to start
(!autoTrip && roundTrip && plays > 1) is not allowed
autoTripping
bool, read-only
returns (autoTrip && roundTrip)
start
float, read-only
defaults to 0
end
float, read-only
defaults to 1
distance
float, read-only
unsigned distance between start and end
targets
array: [Easer]
get returns a shallow copy
pre
function
called just prior start of animation
peri
function
called once per frame
post
function
called when animation arrives
onAutoTrip
function
called when inbound trip begins
onLoop
function
called with next play begins
initial_e
object, read-only
the initial state of this.e
isEasy
bool, read-only
always true
methods
arrive()
undefined
restore()
undefined
init()
undefined
initRoundTrip()
undefined
newTarget()
EBase subclass
creates and optionally adds an Easer to #targets
addTarget()
undefined
adds an Easer to #targets
cutTarget()
bool
removes a target
clearTargets()
undefined
clears the targets collection
"Protected"
properties
_firstLeg
leg object
starting point for the linked list of legs
_leg
leg object
the currently animating leg
_now
number
the current relative time
_value
number
for E.increment
_inbound
bool
shared shorthand for e.status == E.inbound
methods
_validate()
static bool
validates that an object is of class Easy
_duration()
number
more flexible than, and used by, this.duration
_zero()
undefined
initializes prior to animation
_resume()
undefined
prepares to resume post-pause
_reset()
undefined
user-initiated reset or AFrame.prototype.stop()
_easeMe()
this.e.status
called by Easies.prototype._easeEm() during animation
_calc()
undefined
called by easeMe(), overridden in incremental.js
_nextLeg()
this._leg
called by easeMe(), shared with incremental.js
_trip()
undefined
called by _nextLeg(), shared with incremental.js
_listE
string
returns lists of E.xxx constants for error messages
_finishLegs()
bool
shared with other constructor()-related modules
_setTimeCount()
number
shared with incremental.js
Easy.prototype.constructor(obj) - the obj argument
user properties
time
int ms
required for non-incremental
wait
int ms
default: 0
loopWait
int ms
wait time before starting a looped playback
tripWait
int ms
auto-trip pause, before heading inbound
roundTrip
bool
default: 0
autoTrip
bool
wait time before starting a looped playback
flipTrip
bool
auto-trip pause, before heading inbound
start
number
default: 0
end
number
default: 1, no distance property: unlike Easer
mid
number
two-legged shorthand: mid-point value = leg1.end
split
int ms
mid-point in time = leg1.time
gap
int ms
duration of pause at mid-point = leg2.wait
type
int: E.type
default: linear = leg.type, not an Easy property
io
int enum
E.in, E.out, and all two-legged combinations thereof
pow
number
these four are mutually exclusive:
bezier
array or EBezier
[0-1, 0-1, 0-1, 0-1] 0-1 is a soft range for the y values
steps
array
in steps(): leg["steps"].slice()
increment
number
the amount to add to Easy.prototype._value every frame
jump
number
E.start .end .none .both, just like CSS, for steps
timing
int, array, Easy
duration, array of times per step, Easy for easing time
values
array
array of values per step, optional
easy
Easy
Easy for easing values
legs
array: [{}]
user-specified legs
plays
int
defaults to .loops + 1 || .repeats + 1 || 1
oneShot
bool
clears targets upon arrival
count
int
increment count (vs time)
pre
function
runs pre-animation
peri
function
runs every frame
post
function
runs post-animation
onLoop
function
runs upon starting a new play
the Easy leg object
user properties, a subset of obj user properties
time
int ms
required for non-incremental
wait
int ms
default: 0
start
number
default: 0
end
number
default: 1, no distance property: unlike Easer
type
int: E.type
default: linear = leg.type, not an Easy property
io
int enum
E.in and E.out only
pow
number
these four are mutually exclusive:
bezier
array or EBezier
[0-1, 0-1, 0-1, 0-1] 0-1 is a soft range for the y values
steps
array
in steps(): leg["steps"].slice()
increment
number
the amount to add to Easy.prototype._value every frame
jump
number
E.start .end .none .both, just like CSS, for steps
timing
int, array, Easy
duration, array of times per step, Easy for easing time
values
array
array of values per step, optional
easy
Easy
Easy for easing values
some of the system-defined properties
unit
number 0-1
end unit interval for this leg, 0-1 is soft range
comp
number 0-1
the complement of the unit = 1 - unit
part
number
this leg's part of the whole, signed
prev
leg object
previous leg in list, dummied up for _firstLeg, #lastLeg
next
leg object
next leg in list
ease
function
the easing function to call, see easings.js
class EBase
Public
properties
loopByElm
boolean
read-only, is feature on or off?
elmCount
int
read-only, number of elements
elmIndex
int
read-only, current element index for loopByElm
autoTrip
boolean or array
or undefined or array with some undefined
plays
int or array
overrides Easy if not undefined, ditto array
eKey
int or array
E.value|unit|comp or array thereof for Measer
evaluator
function
sets #evaluate, overrides built-in code
peri
function
every frame animation callback
onLoop
function
once per play animation callback
onLoopByElm
function
once per element animation callback
isEaser
bool
read-only, always true
isMEaser
bool
true if instance of MEBase, else undefined
methods
meTrip()
for MEaser only
mePlays()
meEKey()
restore()
init()
setInitial()
calcInitial()
"Protected"
properties
_eVal
function
this.#evaluate ?? this.#Eval or this.#MEval
_set
function
this.#setElm, this.#setElms, or this.#runPeri
methods
_validate()
static bool
validates that an object is of class EBase
_zero()
initializes the object prior to animation
_autoTripping()
returns bool or array [bool]
_playings()
returns int or array [int]
_nextElm()
increments #iElm for loopByElm
_parseElm()
_initByElm()
EFactory.js/create(obj): the obj argument
User properties
elms
element(s)
or string id(s), alias elm, elements, element
prop
PBase
the property to animate
func
Func
the function to use
units
string enum
optional, falls back to prop to func
mask
array: [int]
argument mask: array of arg indexes, etc.
easies
array: [Easy]
for MEBase and subclasses
eKey
string enum
the easy.e property to calculate: E.value, E.unit, E.comp
evaluator
function
user evaluate() function
factor
Number, [Number]
alias f, distance, dist, end (see endToDist())
addend
Number, [Number]
alias a, start
max
Number, [Number]
maximum value(s)
min
Number, [Number]
minimum value(s)
loopByElm
bool
toggles the loop by element feature
autoTrip
bool
alias bAbE, indicates 2D arrays are by argument by element
plays
int > 1
peri
function
once per frame callback
onLoop
function
once per replay animation callback
onLoopByElm
function
once per element animation callback
set
int enum
E.net = "unstructured", E.set = override the current value, E.let or undefined = only override masked arguments
currentValue
[], [[]]
alias cV, user-supplied initial values for the elements
dontGetValues
bool
do not get the current DOM values!
byElm
bool
alias byElement, indicates 1D arrays are by element
byArgByElm
bool
alias bAbE, indicates 2D arrays are by argument by element
colorjs
Color
alias o.cjs, instance of Color.js class Color
displaySpace
string
spaceId for color.display({space:spaceId})
pseudo
bool
for pseudo-animations without elements
class Easer
extends EBase
1 property, >1 elements
_apply()
_calc()
ECalc
class EaserByElm
extends EBase
1 element or loopByElm
_apply()
_calc()
array: [ECalc]
length = #cElms
isByElm
bool, read-only
always true
class MEBase
extends EBase
the multi-ease Easer
Public
properties
easies
array: [Easy]
read-only
easy2Mask
map
read-only
loopEasy
Easy
for looping, see Easies.prototype._next()
autoTripping
array: [Boolean]
read-only
playings
array: [Int]
read-only
duration
Number
read-only, in milliseconds
delay
Number
Math.min(...this.#easies.map(ez => ez.delay))
methods
init()
"Protected" methods
_validate()
static bool
validates that an object is of class EBase
_zero()
initializes the object prior to animation
class MEaser
extends MEBase
1 prop, >1 elms, >1 Easys
_apply()
_calc()
array: [ECalc]
length = o.lz aka o.easies.length
class MEaserByElm
extends MEBase
1 element or loopByElm
_apply()
_calc()
array: [[ECalc]]
by element by ez of #easies: [elm[ez]]
isByElm
bool, read-only
always true
class PBase
Public
properties
name
string, read-only
CSS/SVG function name
key
string, read-only
camelCase name for obj.key notation and error msgs
func
Func
current default function for this property
units
string enum
current default units for this property
methods
join()
string
joins an array of args with func and separators
joinUn()
string
join() for "unstructured" properties, functions
get()
string, [string]
wraps getOne() || getMany() for convenience
getOne()
string
gets the value for one element
getMany()
[string]
gets the values for more than one element
getn()
number, [number]
same as get() but soft-converts to number
getUn()
object, [object]
returns parsed DOM value(s), for "unstructured"
getUnToObj()
[object]
getUn() customized for EFactory create()
computed()
string, [string]
goes directly to getComputedStyle()
parse()
[string]
parses a multi-argument value into an array
set()
undefined
setOne()
undefined
setMany()
undefined
setIt()
undefined
setEm()
undefined
setOneUn()
undefined
"Protected"
properties
_u
string
write-only, backdoor to #units
methods
_unitz()
_mask()
_maskAll()
_2Num()
_validate()
static bool
validates that an object is of class PBase
_seps()
static array
prehistoric methods that should be revived
let()
undefined
Sets only the masked arguments, leaving the rest of the current DOM value intact
net()
undefined
Sets only the masked numbers, leaving the rest of the current DOM value intact - for "unstructured"
class Prop
extends PBase
represents a CSS property
count()
unsigned int
argument count, falls back to this.func.count
required()
unsigned int
required arg count, falls back to func.required
cut()
alias remove()
removes a property from element(s)
isProp
bool, read-only
always true
class Bute
extends PBase
represents an SVG attribute ("Attr" is taken)
count()
unsigned int
argument count, falls back to this.func.count
required()
unsigned int
required arg count, falls back to func.required
cut()
alias remove()
removes an attribute from element(s)
getOne()
string
overrides of PBase:
setIt()
undefined
setEm()
undefined
isDef()
bool
_unitz()
string
isBute
bool, read-only
always true
class PrAtt
extends PBase
for SVG attributes that are supported in CSS
count()
unsigned int
argument count, falls back to this.func.count
required()
unsigned int
required arg count, falls back to func.required
cut()
alias remove()
removes property and/or attribute from element(s)
isPrAtt
bool, read-only
always true
class HtmlBute
extends PBase
represents an HTML attribute
count()
unsigned int
always returns 1
required()
unsigned int
ditto
cut()
n/a for now
getOne()
overrides of PBase:
setIt()
setEm()
isHtmlBute
bool, read-only
always true
const P
Public methods
visible()
undefined
sets visibility as a boolean - for 1 or more elements:
displayed()
undefined
sets display as a boolean
events()
undefined
sets pointer-events as a boolean
isVisible()
bool
gets visibility as a boolean - for 1 element:
isDisplayed()
bool
gets display as a boolean
hasEvents()
bool
gets pointer-events as a boolean
enabled()
undefined
an inverted-pseudo-disable()
PBase instances by name (incomplete relative to CSS, SVG, HTML)