Animation Reference

<style>

animate	Used to call the animations that you would like to run on enter of the state.
animateExit	Used to call the animations that you would like to run on exit of the state.

<animation>

id	The animation id.
repeatCount	The number of times the animation repeats. Values: positive, `indefinite`

<animate>

duration	The duration of the animation. Values: time
begin	Specifies the time to begin the animation (ms or s). Values: time
end	Specifies the time to end the animation (ms or s). Values: time
type	Specifies the type of animation. Values: `style`, `attribute`
name	The name of the style or attribute that you wish to use. If you want to use a style, set your type to "style". If you want to use an attrible, set your type to "attribute". Values: identifier
from	The initial state of the animation Values: integer, color, attributeName, `before`, `after`
to	The final state of the animation Values: integer, color, attributeName, `before`, `after`
dynamics	modifiers to the linear motion of moving objects Values: `none`, `smoothSpline`, `ease`, `smooth`, `sSpline`, `accelerate`, `gravity`, `spring1`, `spring2`, `spring3`, `spring4`, `spring5`
fill	When specified on an animate tag, Boxely will restore any styles changes when the animation if done. Values: `remove`

<set>

In addition to being able to animate attributes along a linear timeline, Boxely has the idea that an attribute can be animated at a set time. These animations are called "set animations" and can be used to compliment any animation you're building. The premise of a set animation is that you can set the value of an attribute at a predetermined time. For instance, if after 10 seconds you want a box to change its hidden attribute to true, a set animation can be setup to assign the value at the predetermined time.

duration	The duration of the animation. Values: time
begin	Specifies the time to begin the animation (ms or s). Values: time
end	Specifies the time to end the animation (ms or s). Values: time
type	Specifies the type of animation. Values: `style`, `attribute`
name	The name of the style or attribute that you wish to use. If you want to use a style, set your type to "style". If you want to use an attrible, set your type to "attribute". Values: identifier
from	The initial state of the animation Values: integer, color, attributeName, `before`, `after`
to	The final state of the animation Values: integer, color, attributeName, `before`, `after`

Definitions and Constants

Terminology used in this reference:

Definitions

integer	Any integer value.
positive	Any positive integer value.
time	Any integer value followed by `ms` or `s`. (eg. `2ms` or `2000ms`)
color	A 6 character hex value (#RRGGBB), an 8 character hex value containing alpha information (#AARRGGBB), or one of the 16 W3C defined color names.
attributeName	If an attribute name is specified in either the to or from fields, Boxely will look up the value associated with that attribute and apply that to the to or from field.
identifier	A string that identifies an animation, style, attribute, etc.

Constants

`indefinite`	Continuously repeat the animation.
`style`	When style is your keyword, then the property "name" is the name of the style you want to animate.
`attribute`	When attribute is your keyword, then the property "name" is the name of the attribute you want to animate.
`before`	Upon the initiation of the animation tag, using before will take the current value from the style cascade. If it is an attribute that is being set, the "before" keyword behavior is undefined. If you have some markup that fires an animation, any styles set at the time the animation is started will be considered "before". After the animation is started, the pending styles are cascaded and become the "after" values.
`after`	After an animation is started, any pending styles are cascaded and become the "after" values. The after keyword will grab the value from the style after it has been cascaded. Any styles set in the same piece of markup as the animation trigger will be considered "after" styles.
remove	When specified on an animate tag, Boxely will restore any styles changes when the animation if done.

Dynamics

`none`	Modifies the object to move in a linear curve.
`smoothSpline`	Modifies the object to move in a linear curve that eventually slows down as it approaches its stopping point.
`ease`	See the dynamic smoothSpline.
`smooth`	Modifies the object to accelerate to a linear curve then decelerates.
`sSpline`	Modifies the object to move slightly before the starting point, then move forward linearly to slightly beyond the end point, and finally moves back to the end point - similar to how the figure 's' is shaped.
`accelerate`	Modifies the object to gain speed over time.
`gravity`	Modifies the object to bounce back when it hits its end point.
`spring1`	Modifies the object to demonstrate elasticity when it reaches the end point. The difference between the springs are levels of elasticity.
`spring2`	Modifies the object to demonstrate elasticity when it reaches the end point. The difference between the springs are levels of elasticity.
`spring3`	Modifies the object to demonstrate elasticity when it reaches the end point. The difference between the springs are levels of elasticity.
`spring4`	Modifies the object to demonstrate elasticity when it reaches the end point. The difference between the springs are levels of elasticity.
`spring5`	Modifies the object to demonstrate elasticity when it reaches the end point. The difference between the springs are levels of elasticity.