Animations and Timing

The resize effect will change the size of the selected node from its current width and height to a new width and height over a time frame and step size.

note: :curwidth and :curheight can be used for either width or height to keep the current width or height even when the exact value is not known.

(resize width height)
;or
(resize width height total-time)
;or
(resize width height total-time (fn callbk [node] ..))
;or
(resize width height total-time (fn callbk [node] ..) accelerator)

Example:

The following action is triggered when we click the button

(em/defaction resize-demo [] 
  "#rz-demo" (em/resize 200 :curheight 500
               (em/resize 5 :curheight 500)))                 

Notice in the above example, I am using the callback to call another resize transform.

The move effect will change the location of the selected node from its current position to a new postion over a time frame and step size. Currently this effect only supports fixed or absolute positioned object.

note: :curx and :cury can be used to keep the current x or y even when the exact value is not known

(move x y)
;or
(move x y total-time)
;or
(move x y total-time (fn callbk [node] ..))
;or
(move x y total-time (fn callbk [node] ..) accelerator)

Example:

The following action is triggered when we click the button

(em/defaction move-demo [] 
  "#mv-demo" (em/move 300 :cury 500
               (em/move -20 :cury 500)))
                   

Notice in the above example, I am using the callback to call another move transform.

The fade effects will change current opacity of the selected nodes from their current opacity to 0 and 1, respectively, over a specific time frame and step size.

Note: There are plans to replace fade-in and fade-out, with a change-opacity effect, so use with caution.

(fade-in total-time)
;or
(fade-in total-time (fn callbk [node] ..))
;or
(fade-in total-time (fn callbk [node] ..) accelerator)

Example:

The following action is triggered when we click the button

(em/defaction fade-demo [] 
  "#fade-demo" (em/fade-out 500
                 (em/fade-in 500)))

Notice in the above example, I am using the callback of fade-out to call another fade-in transform.

The delay effects schedule the transform to be performed a certain number of milliseconds in future.

(delay time transform)

Example:

The following action is triggered when we click the button

(em/defaction delay-demo [] 
  "#delay-demo" (em/do-> (em/resize 200 :curheight 500)
                         (em/delay 2000 (em/resize 50 :curheight 500))))

The chain effect will take a set of asynchronous effects and chain them together synchronously, so one effect will start after the previous effect has finished.

(chain (effect ...) (effect ...))

Example:

The following action is triggered when we click the button

(em/defaction chain-demo [] 
  "#chain-demo" (em/chain (em/resize 200 :curheight 500)
                          (em/resize 5 :curheight 500)))