Interface

Tween

Create a new Tween

The Tween effect, used to transition any CSS property from one value to another.

 

{ }
[{"data":{"type":"library","step":"Create a tween","args":{"element":"ele_id","options":{"duration":"long","transition":"bounce:out","link":"cancel","property":"height"}},"data_to_var":"tw","maxpaths":1,"uuid":"9148d39266042bc89aff74e46b1a483b","x":0,"y":0,"width":120,"height":32,"call":"interface.tween.new","interface":"interface","interface.tween.new":"new"},"paths":[]}]

Example Response

{"tw":""}

Tween a Element's Property

Sets an Element's CSS property to the specified value immediately.

 

{ }
[{"data":{"type":"library","step":"Tween an element's CSS style","args":{"element":"ele_id","property":"background","value":"red"},"data_to_var":"ele","maxpaths":1,"uuid":"9148d39266042bc89aff74e46b1a483b","x":0,"y":0,"width":120,"height":32,"call":"interface.tween.set","interface":"interface","interface.tween.set":"set"},"paths":[]}]

Example Response

{"ele":""}

Tween an Element's Style

Element shortcut method which immediately transitions any single CSS property of an Element to a value.

 

{ }
[{"data":{"type":"library","step":"Tween an element's property","args":{"element":"ele_id","property":"background","to":"orange"},"data_to_var":"ele","maxpaths":1,"uuid":"9148d39266042bc89aff74e46b1a483b","x":0,"y":0,"width":120,"height":32,"call":"interface.tween.start","interface":"interface","interface.tween.start":"start"},"paths":[]}]

Example Response

{"ele":""}

Tween an Element's Style from One Value to Another

Element shortcut method which immediately transitions any single CSS property of an Element from one value to another.

 

{ }
[{"data":{"type":"library","step":"Tween an element's property","args":{"element":"ele_id","property":"background","from":"black","to":"orange"},"data_to_var":"ele","maxpaths":1,"uuid":"9148d39266042bc89aff74e46b1a483b","x":0,"y":0,"width":120,"height":32,"call":"interface.tween.start","interface":"interface","interface.tween.start":"start"},"paths":[]}]

Example Response

{"ele":""}