title: JavaFX:How to slide a pane properly when stage with shadow effect?
body: <p>I have seen this question on "<a href="https://stackoverflow.com/questions/31601900/javafx-how-to-create-slide-in-animation-effect-for-a-pane-inside-a-transparent/59508279#59508279">JavaFX: how to create slide in animation effect for a pane (inside a transparent stage)</a>".</p>
  
  <p>And I don't understand that partial code on the last comment posted by John Astralidis. It seems to solve my problem. I would like to slide a pane with a shadow stage. Now my problem is the slide animation play out of my visual root pane bound, it just play with stage (or actual root pane) bound.</p>
  
  <p>My visual root pane is a child of actual root pane, I set the actual root pane with padding and Corlor.TRANSPARENT to implement my visual root pane shadow effect.</p>
  
  <p><a href="https://i.stack.imgur.com/2hGMX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2hGMX.png" alt="slide image"></a></p>
  
  <p>here is the code I had modified from John Astralidis and Felipe Guizar Diaz.
  the start code:</p>
  
  <pre><code>@Override
  public void start(Stage stage) throws Exception {
      Parent root = FXMLLoader.load(getClass().getResource("FXMLDocument.fxml"));
      stage.initStyle(StageStyle.TRANSPARENT);
      Scene scene = new Scene(root);//
      stage.setScene(scene);
      stage.show();
  }
  public static void main(String[] args) {
      launch(args);
  }
  </code></pre>
  
  <p>the FXMLDocument.fxml:</p>
  
  <pre><code>&lt;AnchorPane xmlns:fx="http://javafx.com/fxml/1" fx:id="anchorPane" prefWidth="500" prefHeight="500" style="-fx-background-color: transparent;"   
          fx:controller="leftslidemenusample.FXMLDocumentController"&gt;
  &lt;children&gt;
      &lt;ToolBar AnchorPane.topAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" minHeight="56.0"   &gt;
             &lt;Button text="menu" fx:id="menu"  /&gt;
      &lt;/ToolBar&gt;
      &lt;StackPane fx:id="mainContent"  style="-fx-background-color:rgba(0,0,0,0.30)" AnchorPane.bottomAnchor="0.0" AnchorPane.topAnchor="56.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0"    &gt;
          &lt;children&gt;
          &lt;/children&gt;
      &lt;/StackPane&gt;
      &lt;AnchorPane fx:id="navList" style="-fx-background-color:white" AnchorPane.topAnchor="56.0" AnchorPane.bottomAnchor="0.0" prefWidth="180.0" translateX="-180"   &gt;
          &lt;children&gt;
              &lt;Label text="left side menu"/&gt;
          &lt;/children&gt;
      &lt;/AnchorPane&gt;
  &lt;/children&gt;
  </code></pre>
  
  <p></p>
  
  <p>and the controller FXMLDocumentController.java</p>
  
  <pre><code>public class FXMLDocumentController implements Initializable {
  @FXML
  private AnchorPane anchorPane;
  @FXML
  private Button menu;
  @FXML
  private AnchorPane navList;
  
  private double shadowSize = 15;
  
  @Override
  public void initialize(URL url, ResourceBundle rb) {
  
      Rectangle rectangle = new Rectangle(500,500);
  
      anchorPane.setClip(rectangle);
      anchorPane.getChildren().add(setupShadowPane());
  
      prepareSlideMenuAnimation();
  }
  private Pane setupShadowPane() {
      Pane shadowPane = new Pane();
      shadowPane.setPrefHeight(500);
      shadowPane.setPrefWidth(500);
      shadowPane.setStyle(
              "-fx-background-color: RED;" +
                      "-fx-effect: dropshadow(gaussian, black, " + 20 + ", 0, 0, 0);" +
                      "-fx-background-insets: " + shadowSize + ";"
      );
  
      Rectangle innerBounds = new Rectangle();
      Rectangle outerBounds = new Rectangle();
      shadowPane.layoutBoundsProperty().addListener((observable, oldBounds, newBounds) -&gt; {
          System.out.println(newBounds.getWidth());
          innerBounds.relocate(newBounds.getMinX() + shadowSize, newBounds.getMinY() + shadowSize);
          innerBounds.setWidth(newBounds.getWidth() - shadowSize * 2);
          innerBounds.setHeight(newBounds.getHeight() - shadowSize * 2);
          outerBounds.setWidth(newBounds.getWidth());
          outerBounds.setHeight(newBounds.getHeight());
  
          Shape clip = Shape.subtract(outerBounds, innerBounds);
          shadowPane.setClip(clip);
      });
  
      return shadowPane;
  }
  private void prepareSlideMenuAnimation() {
      TranslateTransition openNav=new TranslateTransition(new Duration(350), navList);
      openNav.setToX(0);
      TranslateTransition closeNav=new TranslateTransition(new Duration(350), navList);
      menu.setOnAction((ActionEvent evt)-&gt;{
          if(navList.getTranslateX()!=0){
              openNav.play();
          }else{
              closeNav.setToX(-(navList.getWidth()));
              closeNav.play();
          }
      });
  }
  
  }
  </code></pre>