SplitPane.Divider Transition

SplitPane.Divider Transition

Wrote a small utility class to control animated sliding of a SplitPane.Divider.

You can find the complete code in my Bitbucket repo here.

I intend to make it as simple as possible to attach a slide-animation to a standard SplitPane:

splitPane          The SplitPane to be animated.
dividerIndex     Index of the divider to be controlled.
direction           Direction to slide out the layout container
(horizontal SplitPane: LEFT/RIGHT, vertical SplitPane: UP/DOWN)
cycleDuration   Duration/Speed of the slide animation.

SplitPaneDividerSlider( SplitPane splitPane,
                                int dividerIndex,
                                Direction direction,
                                Duration cycleDuration )


E.g. create a divider controller for divider at index 0:

SplitPaneDividerSlider leftSplitPaneDividerSlider = new SplitPaneDividerSlider(centerSplitPane, 0, SplitPaneDividerSlider.Direction.LEFT);

This guy can be triggered by a ToggleButton:

leftToggleButton.selectedProperty().addListener((ObservableValue<? extends Boolean> ov, Boolean t, Boolean t1) -> {

Set a font-icon on the ToogleButton:

AwesomeDude.setIcon(leftToggleButton, AwesomeIcon.TOGGLE_LEFT, "2em");

leftToggleButton.selectedProperty().addListener((ObservableValue<? extends Boolean> ov, Boolean t, Boolean t1) -> {
      if (t1) {
          AwesomeDude.setIcon(leftToggleButton, AwesomeIcon.TOGGLE_LEFT, "2em"
      } else {
           AwesomeDude.setIcon(leftToggleButton, AwesomeIcon.TOGGLE_RIGHT, "2.5em")          

SplitPanes in JavaFX do respect the min/max sizes of layout containers.

Movement of the divider is stopped when reaching these values.
To overrule this constraint when animation is started to slide out the content, min size is set to 0.0 and the original size will be restored when sliding in the content is finished. The right pane is figured out based on the divider index and the direction to side out:

        switch (direction) {
            case LEFT:
            case UP:
                content = (Region) splitPane.getItems().get(dividerIndex);
            case RIGHT:
            case DOWN:
                content = (Region) splitPane.getItems().get(dividerIndex + 1);

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

10 thoughts on “SplitPane.Divider Transition”

  1. Hi,

    Thanks for the helpful code. However, I do notice an issue with the example. Well it’s not an issue with the code but something that was not accounted for. When the splitpanel are closed and you try to resize the whole window, the close windows start to show.

    I can’t seem to figure out how to fix this. I put an action listener on change when the window changes, but I can’t figure out how to adjust the splitpanel so appears close as the window gets resized.

    I tried going down all the way to the SplitPanelDivderSlider.java and printed out all the values for the splitPane. Then tried to set the values accordingly to the difference in the change of the outer window, but didn’t come up with any luck.

    I was wondering if you had any suggestion?

    Any advice appreciated,

    1. Hi Derek,

      to make sure I got you right:
      Lets assume the main window is filling half of screen size. Then close the the splitpanes. After that resize the window. If the window gets expanded the closes pane start to be visible by exact the difference to the former window size, right?


  2. Hallo Jens Deters,

    ich habe das Gleiten als Erstes mit deiner Lösung versucht zu realisieren. Aber danach habe ich dies mit einem animation.Timeline realisiert und das war viel simpler, falls es dich interessieren sollte.


  3. hi Jenes ,can i get any example code so that i can understand how to add splitpane divider transition.