Fx Basics

By default RightJS comes with the basic visual effects package. It has one base (abstract) class Fx, which defines the common visual effects interface and is used as the basis for all the other effect classes.


Fx objects handle the following events:

  • start
  • finish
  • cancel

In line with the general events handling convention this means that you can use all the common on, stopObserving etc methods as well as onStart, onFinish, onCancel shortcuts.


All visual effects support the following options:

duration‘normal’the effect duration in ms or a string predefined name
transition‘Sin’the transition algorithm used for the effect
queuetrueboolean marker if the effect should be queued
enginenullthe engine used by Fx.Morph, defined automatically


There are three named durations which an be used in Fx options:

short200 ms
normal400 ms (default)
long800 ms


Since RightJS 2.3.0 the transition attribute can be defined via standard CSS3 cubic bezier functions.


initialize, cancel, finish, prepare, render, start

top ↑initialize

initialize([Element element[, Object options]])


The basic constructor

top ↑cancel

cancel() -> Fx self


Cancels the effect and interrupts the visual effects queue.

top ↑finish

finish() -> Fx self


Forces the effect to stop and marks it as a completely finished.

top ↑prepare

prepare([....]) -> void


Abstract method which gets called with the same arguments as the start method when the visual effects queue reaches this effect.

top ↑render

render(Float position) -> void


Abstract protected method where the actual effect rendering is supposed to happen. During the effect run it receives float numbers from 0 to 1 that represent the position of the effect from the beginning to the end.

top ↑start

start() -> Fx self


Starts the effect.

NOTE: DO NOT overload this method! If you need to make some preparations in your effect, use the prepare method. This method just receives your attributes and holds them inside the visual effects queue.