I took the opportunity to see how easy or difficult it is to implement a “shadow motion effect” in JavaFX. The effect is described in a post from Lam Nguyen and he implements it in jQuery in 5 lines.

What do we need to do this in JavaFX? Is this possible at all?

Yes it is possible and it was easy, fast (~10 min) and IMHO it looks nice and it is not only an animation – you can drag it:

1. Create a new JavaFX project in NetBeans and choose ‘Drag and Drop’.

2. Then adapt the DragBehaviour to the following. The necessary changes are minimal and marked with HERE:

// HERE: change 1 line
public var targetGroup: Group;

public var targetWidth: Number;
public var targetHeight: Number;
public var maxX = 200.0;
public var maxY = 200.0;
var startX = 0.0;
var startY = 0.0;

init {
// HERE: +1 line
var target = targetGroup.content[0];

target.onMousePressed = function (e: MouseEvent): Void {
  startX = e.sceneX - target.translateX;
  startY = e.sceneY - target.translateY;
}

target.onMouseDragged = function (e: MouseEvent): Void {
var tx = e.sceneX - startX;

// HERE +7 lines
var cloned = Duplicator.duplicate(target);
insert cloned into targetGroup.content;
FadeTransition {
  node: cloned fromValue: 1 toValue: 0 duration: 0.5s repeatCount: 1
  action: function () {
     delete cloned from targetGroup.content;
  } }.play();

if (tx < 0)
   tx = 0;

if (tx > maxX - targetWidth)
   tx = maxX - targetWidth;

target.translateX = tx;
var ty = e.sceneY - startY;
if (ty < 0)
  ty = 0;

if (ty > maxY - targetHeight)
  ty = maxY - targetHeight;

target.translateY = ty;
} // onMouseDragged
} // init

3. Drag it yourself  or try it out now:

From http://karussell.wordpress.com/2010/04/22/reply-via-javafx-on-shadow-motion-effect-in-5-lines-of-jquery/