Sliding Content In With JavaFX TranslateY

A reader asked about sliding content into a screen via animation.  This blog post uses a Pane to show a slide which is animated in using the slide's translateY property. I used a Pane because it does not attempt to resize the child's contents.


This application contains a SplitPane with controls on the left and content on the right.  Hovering over the left Hover Button will begin an animation that brings a slide onto the screen.  Hovering off the Button will animate the slide off of the screen.  Intermediate transitions are handled appropriately.  See the following video demonstration.


A few notes on the approach

• The animation uses the translateY property instead of the prefWidth / Height properties so that the integrity of the content is preserved.
• The content is stored in a Pane because Pane won't attempt to stretch the content as a VBox or other advanced container would.

Code

Here is the JavaFX Application code.

public class SlideApp extends Application {

    private final static int APP_HEIGHT = 600;
    private final static int APP_WIDTH = 800;
    private final static int SLIDE_HEIGHT = 400;
    private final static int SLIDE_WIDTH = 400;

    private VBox slideVBox;

    @Override
    public void start(Stage primaryStage) throws Exception {

        Button hover_b = new Button("Hover");
        hover_b.hoverProperty().addListener(this::slideInOut);

        VBox controlsVBox = new VBox(hover_b);

        Button content_b = new Button("Content");

        slideVBox = new VBox(content_b);
        slideVBox.setPrefHeight(SLIDE_HEIGHT);
        slideVBox.setPrefWidth(SLIDE_WIDTH);
        slideVBox.setStyle("-fx-background-color: darkgreen");
        slideVBox.setAlignment(Pos.CENTER);

        Pane contentPane = new Pane(slideVBox);

        slideVBox.setTranslateY( -1 * SLIDE_HEIGHT ); // off screen

        SplitPane mainPane = new SplitPane(controlsVBox, contentPane);
        mainPane.setDividerPositions(0.0, 0.3);

        Scene scene = new Scene(mainPane);

        primaryStage.setTitle("Slide App");
        primaryStage.setWidth( APP_WIDTH );
        primaryStage.setHeight( APP_HEIGHT );
        primaryStage.setScene( scene );
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }

    private void slideInOut(Observable obs, Boolean ov, Boolean nv) {
        TranslateTransition tt = new TranslateTransition(Duration.millis(750), 
                         slideVBox);
        tt.setToY( (nv)?0:(-1*SLIDE_HEIGHT) );
        tt.play();
    }
}

This technique uses the translateY property to move content on an off the screen via an animation.  The short form TranslateTransition was used in place of the general Animation class to avoid the KeyFrame and KeyValue set up.  In this small example, several different JavaFX container classes were used to highlight the importance of selecting the right container: SplitPane for a layout based on screen percentage, VBox to stretch and center the contents, Pane to allow the content to be displayed without resizing.