$$.dynamic() with g-bind

Graphane Template Engine provides a very simple for of animation in collaboration with the g-bind directive. When you use $$.dynamic() into the g-bind expression and the value is applied progressively and show an animation.

The syntax is: g-bind:attribute="$$.dynamic(<value> [, <duration>] [, <delay>]).

<value>

Any value applicable to the attribute we want to update progressively is accepted. You can use any valid expression for calculated values.

<duration>

By default, the animation duration is 200ms. You can change this behavior passing a second parameter to $$.dynamic() function.

<delay>

By default, the animation duration starts immediately. You can change this behavior passing a third parameter to $$.dynamic() function in milliseconds.

Keyframes as values

You can pass an array of values to describe non-linear progressing.

Optionally, you can pass an object with value and offset (with values from 0 to 1) to have more control over the execution of the animation.