Trying to achieve grow/shrink to nothing effect

Question

I'n trying to create a vertical panel where items can be added which are displayed top to bottom. Each "item" is a box with some interesting information to display and should be shown for a few seconds.
The space where it will be displayed will first grow to make room, then fade in, display for a few seconds, fade out, and shrink back to nothing. When it grow/shrinks, the intention is that the items above and below will make room/close the gap accordingly.
Now, I've gotten quite far to get this to work with two different solutions, but both have a problem.
Solution 1
Put the "item" in a Group. Then use Timelines to animate its ScaleYProperty to simulate the shrinking to nothing effect.
Problem: As soon as I put things in a group, the content of the "Item" is too small (it uses the preferred size instead of expanding to fill available space). If I use a StackPane it looks exactly how I want, but the ScaleYProperty won't work properly then (because StackPane ignores transformations in its size calculations).
I've tried forcing the preferred size to the correct value. Problem: I don't know the correct value, I don't know how to find out how big the "content" area should be. Doing a getWidth() of the vertical panel and substracting the Insets comes close, but there's always a small difference -- in other words, unsatisfactory.
...stuck
Solution 2
Replace the "item" with Rectangles that I resize to make space for the "item" before actually adding it. The shrinking effect works great... but I cannot get the grow effect to work properly because I donot know how big the "item" will be... there's no way to find out how big something will be once added to the scene graph.
Fiddling with adding the item temporarily to the scene graph, then trying to get its size somehow didn't work or had annoying side effects.
So, basically, I'm stuck with both approaches.
First because Groups donot allow their content to fill available space... (and finding out the correct preferred size seems not possible)...
Second because I cannot find out how big something will be BEFORE adding it to a scene graph...
Any ideas what I can still try?

Answer 1

Okay, a fully working example ripped completely out of its context :)
This needs some keyboard control. Press 1/2 to adjust the "Playback rate" and 9/0 to adjust "Volume". In the center of the screen boxes will appear showing what you just did, and will fade out after a while. Adjusting both settings shortly after each other can result in two bars being displayed (this is intended) and shows the effect I want in greater detail.
The part I'm not happy with is where I hard-code the Preferred Width (search for setPrefWidth) because it is not correct (the width is only an estimate and changes when a slider is displayed... so the next slider added gets a different preferred width).
Possible solutions are some other way of "shrinking" a group without using the ScaleYProperty; somehow getting the correct preferred width; somehow getting Group to respect the "available space" for my StackPane... etc...
It works great in my opinion, just this little snag I want to get rid of.
playback-state-overlay.css
.root {
  -c-main: rgb(173, 216, 230);
  -c-shadow-highlight: derive(-c-main, -50%);
  color-content-background: derive(-c-main, -80%);
.label {
  -fx-text-fill: white;
.slider {
  -fx-show-tick-labels: true;
  -fx-show-tick-marks: true;
.slider .axis {
  -fx-tick-label-fill: -c-main;
.slider .thumb {
  -fx-background-color: rgb(0, 0, 0, 0.5), rgb(64, 64, 64), linear-gradient(to bottom, yellow, white, orange);
  -fx-background-insets: 0, 1, 2;
  -fx-background-radius: 0.3em, 0.25em, 0.2em;
  -fx-padding: 0.75em 0.3em 0.75em 0.3em;
.slider .track {
  -fx-background-color: -c-shadow-highlight, derive(-c-main, -22%), linear-gradient(to bottom, derive(-c-main,-15.5%), derive(-c-main,34%) 30%, derive(-c-main,68%));
  -fx-background-insets: 1 0 -1 0, 0, 1;
  -fx-background-radius: 0.2em, 0.2em, 0.1em;
  -fx-padding: 0.208333em;
.axis:top {
    -fx-border-color: transparent transparent #aaaaaa transparent;
.axis:right {
    -fx-border-color: transparent transparent transparent #aaaaaa;
.axis:bottom {
    -fx-border-color: #aaaaaa transparent transparent transparent;
.axis:left {
    -fx-border-color: transparent #aaaaaa transparent transparent;
.axis-tick-mark {
  -fx-stroke: #aaaaaa;
.item {
  -fx-font: 22pt "Arial";
.content-box {
  -fx-background-color: color-content-background;
  -fx-background-radius: 20;
  -fx-padding: 30;
  -fx-hgap: 20; 
ShrinkTest.java
package hs.javafx;
import javafx.animation.Animation.Status;
import javafx.animation.KeyFrame;
import javafx.animation.KeyValue;
import javafx.animation.Timeline;
import javafx.application.Application;
import javafx.beans.binding.NumberExpression;
import javafx.beans.binding.StringBinding;
import javafx.beans.binding.StringExpression;
import javafx.beans.property.DoubleProperty;
import javafx.beans.property.IntegerProperty;
import javafx.beans.property.SimpleDoubleProperty;
import javafx.beans.property.SimpleIntegerProperty;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.collections.ListChangeListener;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.Group;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.Slider;
import javafx.scene.input.KeyCode;
import javafx.scene.input.KeyEvent;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.ColumnConstraints;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.RowConstraints;
import javafx.scene.layout.StackPane;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
import javafx.util.Duration;
public class ShrinkTest extends Application {
  private final Player player = new Player();
  private final VBox playbackStateOverlay = new VBox() {{
    getStyleClass().add("content-box");
    setVisible(false);
  public static void main(String[] args) {
    Application.launch(ShrinkTest.class, args);
  @Override
  public void start(Stage primaryStage) throws Exception {
    StackPane stackPane = new StackPane();
    playbackStateOverlay.getChildren().addListener(new ListChangeListener<Node>() {
      @Override
      public void onChanged(ListChangeListener.Change<? extends Node> change) {
        playbackStateOverlay.setVisible(!change.getList().isEmpty());
    stackPane.setOnKeyPressed(new EventHandler<KeyEvent>() {
      @Override
      public void handle(KeyEvent event) {
        if(event.getCode() == KeyCode.DIGIT1) {
          player.rateProperty().set(player.rateProperty().get() - 0.1);
        if(event.getCode() == KeyCode.DIGIT2) {
          player.rateProperty().set(player.rateProperty().get() + 0.1);
        if(event.getCode() == KeyCode.DIGIT9) {
          player.volumeProperty().set(player.volumeProperty().get() - 1);
        if(event.getCode() == KeyCode.DIGIT0) {
          player.volumeProperty().set(player.volumeProperty().get() + 1);
        event.consume();
    stackPane.getChildren().add(new GridPane() {{
      getColumnConstraints().add(new ColumnConstraints() {{
        setPercentWidth(25);
      getColumnConstraints().add(new ColumnConstraints() {{
        setPercentWidth(50);
      getColumnConstraints().add(new ColumnConstraints() {{
        setPercentWidth(25);
      getRowConstraints().add(new RowConstraints() {{
        setPercentHeight(10);
      add(new Button("Hi"), 0, 0);  // something to get focus
      add(playbackStateOverlay, 1, 1);
    Scene scene = new Scene(stackPane);
    scene.getStylesheets().add("playback-state-overlay.css");
    primaryStage.setScene(scene);
    primaryStage.setFullScreen(true);
    primaryStage.show();
    final StringBinding formattedVolume = new StringBinding() {
        bind(player.volumeProperty());
      @Override
      protected String computeValue() {
        return String.format("%3d%%", player.volumeProperty().get());
    final StringBinding formattedRate = new StringBinding() {
        bind(player.rateProperty());
      @Override
      protected String computeValue() {
        return String.format("%4.1fx", player.rateProperty().get());
    player.volumeProperty().addListener(new ChangeListener<Number>() {
      @Override
      public void changed(ObservableValue<? extends Number> observable, Number oldValue, Number newValue) {
        addOSD(createOSDItem("Volume", 0.0, 100.0, player.volumeProperty(), formattedVolume));
    player.rateProperty().addListener(new ChangeListener<Number>() {
      @Override
      public void changed(ObservableValue<? extends Number> observable, Number oldValue, Number newValue) {
        addOSD(createOSDItem("Playback Speed", 0.0, 4.0, player.rateProperty(), formattedRate));
  private static Node createOSDItem(final String title, final double min, final double max, final NumberExpression value, final StringExpression valueText) {
    return new VBox() {{
      setId(title);
      getStyleClass().add("item");
      getChildren().add(new BorderPane() {{
        setLeft(new Label(title) {{
          getStyleClass().add("title");
        setRight(new Label() {{
          getStyleClass().add("value");
          textProperty().bind(valueText);
      getChildren().add(new Slider(min, max * 1.01, 0) {{  // WORKAROUND: 1.01 to work around last label display bug
        valueProperty().bind(value);
        setMinorTickCount(4);
        setMajorTickUnit(max / 4);
  public void addOSD(final Node node) {  // id of node is used to distinguish same items
    String id = node.getId();
    for(Node child : playbackStateOverlay.getChildren()) {
      if(id.equals(child.getId())) {
        Timeline timeline = (Timeline)child.getUserData();
        if(timeline.getStatus() == Status.RUNNING) {
          timeline.playFromStart();
        return;
    final StackPane stackPane = new StackPane() {{
      getChildren().add(node);
      setPrefWidth(playbackStateOverlay.getWidth() - playbackStateOverlay.getInsets().getLeft() - playbackStateOverlay.getInsets().getRight());
    node.opacityProperty().set(0);
    final Group group = new Group(stackPane);
    group.setId(node.getId());
    stackPane.setScaleY(0.0);
    final EventHandler<ActionEvent> shrinkFinished = new EventHandler<ActionEvent>() {
      @Override
      public void handle(ActionEvent event) {
        playbackStateOverlay.getChildren().remove(group);
    final Timeline shrinkTimeline = new Timeline(
      new KeyFrame(Duration.seconds(0.25), shrinkFinished, new KeyValue(stackPane.scaleYProperty(), 0))
    final EventHandler<ActionEvent> fadeInOutFinished = new EventHandler<ActionEvent>() {
      @Override
      public void handle(ActionEvent event) {
        group.setId(null);
        shrinkTimeline.play();
    final Timeline fadeInOutTimeline = new Timeline(
      new KeyFrame(Duration.seconds(0.5), new KeyValue(node.opacityProperty(), 1.0)),
      new KeyFrame(Duration.seconds(2.5), new KeyValue(node.opacityProperty(), 1.0)),
      new KeyFrame(Duration.seconds(3.0), fadeInOutFinished, new KeyValue(node.opacityProperty(), 0.0))
    EventHandler<ActionEvent> expansionFinished = new EventHandler<ActionEvent>() {
      @Override
      public void handle(ActionEvent event) {
        fadeInOutTimeline.play();
    Timeline expansionTimeline = new Timeline(
      new KeyFrame(Duration.seconds(0.25), expansionFinished, new KeyValue(stackPane.scaleYProperty(), 1.0))
    group.setUserData(fadeInOutTimeline);
    playbackStateOverlay.getChildren().add(group);
    expansionTimeline.play();
  public static class Player {
    private final IntegerProperty volume = new SimpleIntegerProperty(50);
    private final DoubleProperty rate = new SimpleDoubleProperty(1.0);
    public IntegerProperty volumeProperty() {
      return volume;
    public DoubleProperty rateProperty() {
      return rate;
}