FX Plugin

Back to plugins | Download plugin

The FX plugin provides a visual effects library for the nano JavaScript framework. It contains over 25 preconfigured effects ready to use, plus core effect functions to build your own custom effects.

To use any effect simply call the plugin method fx() and pass the effect name as a string. 

  nano('example').fx('jump');

The fx() method also allows 2 additional arguments, a params object and a callback function. The parameters let you configure certain aspects of the effect, such as initial and end states, timing and effect rate, while the callback function allows you to execute some code once the effect has completed. 

  nano('example').fx('fade', {start: 0.8, end: 0, time: 300}, function() { this.del(); });

The scope of the callback function is the element the effect is currently modifying. Using callbacks you can chain effects to create a chronological effect sequence. However, keep in mind that JavaScript's timing is not reliable to be accurate, so always avoid attempting to run effects in parallel, as race conditions will cause unexpected results.

Preconfigured Effects

The following is a list of all available preconfigured effects. Below are detailed each individual effect, in addition to the possible configuration parameters. You can view more information about the FX plugin at http://www.nanofx.org.

Fade

Performs a custom fade effect with the opacity of the element. Available parameters are: 

  nano('example').fx('fade', {start: 0.9, end: 0.2, time: 500}, function() { this.del(); });

Fade In

Performs a custom fading in effect with the opacity of the element. Available parameters are: 

  nano('example').fx('fadeIn', {end: 0.8, time: 300}, function() { this.set('Done!'); });

Fade Out

Performs a custom fading out effect with the opacity of the element. Available parameters are: 

  nano('example').fx('fadeOut', {start: 0.9, time: 500}, function() { this.del(); });

Toggle

Toggles a fade in or fade out effect depending on the visibility of the element. Available parameters are: 

  nano('example').fx('toggle', {time: 300}, function() { alert(this.visible()); });

Move

Moves the element to the specified position. If either axis is omitted the element will ignore that axis. Available parameters are: 

  nano('example').fx('move', {x: 150, y: 90, time: 500}, function() { alert(this.x() + ',' + this.y()); });

Resize

Resizes the element to the specified dimension. If either width or height is omitted the element will not modify that length. Available parameters are: 

  nano('example').fx('resize', {w: 70, h: 50, time: 500}, function() { alert(this.w() + ',' + this.h()); });

Transform

Combines an element move and resize in a single effect. Available parameters are: 

  nano('example').fx('transform', {x: 150, y: 130, w: 320, h: 250, time: 2000});

Bounce

Performs a bouncing effect with the element. Available parameters are: 

  nano('example').fx('bounce', {time: 500}, function() { this.del(); });

Jump

Performs a jumping effect with the element. Available parameters are: 

  nano('example').fx('jump', {time: 500}, function() { this.del(); });

Shake

Performs a shaking effect the element. Available parameters are: 

  nano('example').fx('shake', {time: 500}, function() { this.del(); });

Vibrate

Performs a vibration effect with the element. Available parameters are: 

  nano('example').fx('vibrate', {time: 500}, function() { this.del(); });

Punch

Performs a punch out effect with the element. Available parameters are: 

  nano('example').fx('punch', {time: 300}, function() { this.del(); });

Pinch

Performs a pinching effect with the element. Available parameters are: 

  nano('example').fx('pinch', {time: 300}, function() { this.del(); });

Pulse

Performs a single pulse effect with the opacity of the element. Available parameters are: 

  nano('example').fx('pulse', {start: 0.8, time: 500}, function() { this.del(); });

Blink

Performs a single blink effect with the visibility of the element. Available parameters are: 

  nano('example').fx('blink', {time: 300}, function() { this.del(); });

Flash

Performs a single flash effect with the opacity of the element. Available parameters are: 

  nano('example').fx('flash', {time: 300}, function() { this.del(); });

Drop

Performs an effect which makes the element appear to drop off the page. Available parameters are: 

  nano('example').fx('drop', {time: 500}, function() { this.del(); });

Sink

Performs an effect which makes the element appear to sink into the page. Available parameters are: 

  nano('example').fx('sink', {time: 1000}, function() { this.del(); });

Melt

Performs an effect which makes the element appear to melt away. Available parameters are: 

  nano('example').fx('melt', {time: 1000}, function() { this.del(); });

Shrink

Performs an effect which makes the element appear to shrink. Available parameters are: 

  nano('example').fx('shrink', {time: 500}, function() { this.del(); });

Grow

Performs an effect which makes the element appear to grow. Available parameters are: 

  nano('example').fx('grow', {time: 500}, function() { this.del(); });

Fold

Performs an effect which makes the element appear to fold away. Available parameters are: 

  nano('example').fx('fold', {time: 500}, function() { this.del(); });

Pack

Performs an effect which makes the element appear to pack up. Available parameters are: 

  nano('example').fx('pack', {time: 500}, function() { this.del(); });

Evaporate

Performs an effect which makes the element appear to evaporate. Available parameters are: 

  nano('example').fx('evaporate', {time: 1000}, function() { this.del(); });

Implode

Performs an effect which makes the element appear to implode. Available parameters are: 

  nano('example').fx('implode', {time: 300}, function() { this.del(); });

Explode

Performs an effect which makes the element appear to explode. Available parameters are: 

  nano('example').fx('explode', {time: 300}, function() { this.del(); });

Morph

Moves and resizes the element to match another. Available parameters are: 

  nano('example').fx('morph', {id: 'myTarget'}, function() { this.fx('fadeOut'); });