NodeFire Library

Animates any inline style setting on any Node where the value is a numerical unit or color. Multiple styles may be animated simultaneously. Create a vast array of animation effects by adding animStyle objects to clips, clip objects to tracks, and track objects to timelines.

Tie styleAnim objects together and automate them within a widget using the transition or replicator classes. Control the animation rendering of any Node in your doucment first hand with the player or playerSynchronizer classes.


New styleAnim Object Configuration Properties

When instantiating a new styleAnim object, pass the constructor an object literal with config properties. Properties may include any number of script style name and value pairs to animate... In the example above, two styles (opacity, and width) will be animated x number of frames between the start and end range when a clip using the example styleAnim object is played. The start and end values may include any valid CSS units and will follow the standard rules of CSS inheritance.


Using 'refNode'

"width", "height", "top", "left", and other dimension based styles are by default relative to thier ancestors when using relative units such as '%'. The relative ancestor node to base these types of units on may be changed and pointed into the DOM instead of up. Setting an object literal containing a refNode property for the 'start' or 'end' values can target specific ancestor or descendant nodes... In the example above the width properties 'end' value will be 100% the width of the animation Node. The Node will 'start' at '0px' wide and grow to its original width. The keyowrd "self" sets the refNode to the node which will animate.

Start and end unit values must always match except when using 'refNode'. 'refNode' automatically converts to 'px', any cooresponding values such as the 'start:0px' above should use the 'px' unit in the presense of a 'refNode'.


Advanced 'refNode' Settings

To target a descendant or ancestor Node of the animating Node, set 'refNode' to a function or array of functions to invoke. Use functions from the NodeFire API or your own custom functions. Each function must take a Node as its first paramter and return a Node. The first function is passed the node to be animated, and subsequent function are passed the returned Node.

• var fnArray = [NF.widget.hierStructure.getParentItem, NF.widget.hierStructure.getChildSub]
• new NF.anim.styleAnim({width:{start:{value:'100%', refNode:'self'}, end:{refNode:fnArray, value:'100%', adjust_offsetWidth:-1}}});

The above example is based on animating a horizontal main menu item link ('nfLink'). The link starts at it's normal width and grows to the width of it's child sub menu. The 2 functions in the 'fnArray' variable first get the links parent item ('nfItem') then the items child sub ('nfSubC'). The optional 'adjust_offsetWidth' parameter tweaks the final calculation by -1px to match into a sibling items border divider.


'refNode' Object Literal Properties

The following properties may be used with a 'refNode' object literal. 'refNode' object literals may be applied to any styles 'start' or 'end' property values.

• {value:string} - The percentage value of the refNodes dimension or coordinates depending on the style bieng animated.
• {refNode:"self" | function | function Array} - Keyword "self" targets the animating node, see above for details on using functions.
• {adjust_offsetWidth:int} - Optional int value to adjust the final computed relative value by.
• {adjust_offsetHeight:int} - Optional int value to adjust the final computed relative value by.
• {adjust_offsetLeft:int} - Optional int value to adjust the final computed relative value by.
• {adjust_offsetTop:int} - Optional int value to adjust the final computed relative value by.

Valid Styles and Settings

Any valid style which uses a numerical unit, combination of numerical units, or a hexadecimal color value may be animated. The style name must be the script property name and not the CSS name. (e.g. use 'fontSize' instead of 'font-size'). Styles which use multiple values seperated by a space are valid....

• new styleAnim({clip:{start:"100px 100px 100px 100px", end:"0px 100px 100px 0px"}})
• new styleAnim({padding:{start:"0cm 0cm 0cm 0cm", end:"2.5cm 1cm 2.5cm 1cm"}})

The NodeFire: API parses multiple values, to keep things light the parser is not as forgiving as the browsers. Make certain there is a single space between your multiple values and that all unit types matche between the 'start' and 'end' properties.

Specify color change animations as 3 or 6 digit hexidecimal values precedded by a '#' character. Each color component (red, green, blue) is individually calculated from the start to end range...

• new styleAnim({backgroundColor:{start:"#fff", end:"#000"}})
• new styleAnim({color:{start:"#3366ff", end:"#993300"}})

The following is a list of some common style properties which may be animated...

• top, left, width, height
• clip, opacity, fontSize, backgroundPosition
• color, borderColor, backgroundColor
• padding, paddingTop, paddingRight, paddingBottom, paddingLeft
• margin, marginTop, marginRight, marginBottom, marginLeft
• borderWidth, borderTopWidth, borderRightWidth, borderBottomWidth, borderLeftWidth

Opacity and Clip Notes

It is not necessary to specify an alpha filter style for IE opacity compatability. The styleAnim class automatically uses filter animation style properties if it detects the IE browser. The CSS opacity style animation will work in all browsers (Note: IE will force overflow:hidden on the Node during the animation effect)... The browsers typically do not allow clip style values be set relative to another Node using the '%' calculation. However, styleAnim will allow for relative '%' values when using a refNode... The above example reveals a Node from the vertical and horizontal center to it full size.