Sliding images off the screen with javafx

Question

I am writing my first javafx app and I am trying to get images to slide on and off the screen. I have accomplished this to some degree using the below code.
the problem is that the images slide off just fine but when they come back on they stop before they get to their original locations.
Any chance someone can tel me what I'm doing wrong?
function slideOut(index:Integer, len:Integer):Void{
    def timeline = Timeline {
            keyFrames: [
                 for(itr in [0..len]){
                     if(itr != index){
                          KeyFrame {
                              time: 0s, values: [
                                        page.content[itr].translateX => page.content[itr].translateX tween Interpolator.EASEOUT
                          KeyFrame {
                              time: 1s, values: [
                                        page.content[itr].translateX => page.content[itr].translateX + 300 tween Interpolator.EASEOUT
                     }else{
                         KeyFrame {
                              time: 0s, values: [
                                        page.content[itr].translateX => page.content[itr].translateX tween Interpolator.EASEOUT
                          KeyFrame {
                              time: 1s, values: [
                                   page.content[itr].translateX => page.content[itr].translateX tween Interpolator.EASEOUT
        timeline.play();
function slideIn(index:Integer, len:Integer):Void{
    def timeline = Timeline {
            keyFrames: [
                 for(itr in [0..len]){
                     if(itr != index){
                          KeyFrame {
                              time: 0s, values: [
                                        page.content[itr].translateX => page.content[itr].translateX tween Interpolator.EASEIN
                          KeyFrame {
                              time: 1s, values: [
                                        page.content[itr].translateX => page.content[itr].translateX - 300 tween Interpolator.EASEIN
                     }else{
                         KeyFrame {
                              time: 0s, values: [
                                        page.content[itr].translateX => page.content[itr].translateX tween Interpolator.EASEIN
                          KeyFrame {
                              time: 1s, values: [
                                   page.content[itr].translateX => page.content[itr].translateX tween Interpolator.EASEIN
        timeline.play();
def page:Group = Group{
    content: [
         for(i in [0..ImageLoader.length.intValue()]){
               ImageView {
                   var bool = true;
                   translateX: 210 * (i+1)
                   translateY: 175 //* (i+1)
                   scaleX: 1.0
                   scaleY: 1.0
                   preserveRatio: true
                   smooth: true
                   image: Image {
                       width: 75
                       height: 75
                       url: "file:/{image_folder}/{imgArray}"
               onMouseClicked: function( e: MouseEvent ): Void {
               if(bool){
               bool = false;
               slideOut(i,ImageLoader.length.intValue());
               zoomIn(page.content[i]);
               }else{
               bool = true;
               zoomOut(page.content[i]);
               slideIn(i,ImageLoader.length.intValue());

Answer 1

Actually, I am not even sure why it worked... Using the same variable on both sides of the => is probably a bad idea.
I could get some result with the following code:
function slideOut(index:Integer, len:Integer):Void{
  def timeline = Timeline {
      keyFrames: [
        for(itr in [0..len]){
          if(itr != index){
            KeyFrame {
              time: 3s, values: [
                  page.content[itr].translateX => getOrig(itr) + page.boundsInLocal.width tween Interpolator.EASEIN
          } else { null; }
    timeline.play();
function slideIn(index:Integer, len:Integer):Void{
  def timeline = Timeline {
      keyFrames: [
        for(itr in [0..len]){
          if(itr != index){
            KeyFrame {
              time: 3s, values: [
                  page.content[itr].translateX => getOrig(itr) tween Interpolator.EASEOUT
          } else { null; }
    timeline.play();
def image_folder = "D:/Documents/Images/Misc";
def imgArray = [ "beetle1.gif", "beetle2.gif", "beetle3.gif", "butterfly.gif", "LeftAnt.gif" ];
def IMG_NB = sizeof imgArray;
function getOrig(index: Integer) { return 210 * (index + 1); }
def page:Group = Group{
  content: [
    for(i in [0..IMG_NB]){
      ImageView {
        var bool = true;
        translateX: getOrig(i)
        translateY: 175 //* (i+1)
        scaleX: 1.0
        scaleY: 1.0
        preserveRatio: true
        smooth: true
        image: Image {
          width: 75
          height: 75
          url: "file:/{image_folder}/{imgArray}"
onMouseClicked: function( e: MouseEvent ): Void {
if(bool){
bool = false;
slideOut(i,IMG_NB);
//~ zoomIn(page.content[i]);
}else{
bool = true;
//~ zoomOut(page.content[i]);
slideIn(i,IMG_NB);
Commented out the zoomIn/zomOut you don't provide, and replaced some unknown variables by my own...