The WijDialog control supports animation. You can control animation when the dialog window is hidden, expanded, collapsed, or opened.

1. Create an ASP.NET Web application with a ScriptManager control and install Juice UI and the Wijmo Juice libraries to your project via NuGet.
2. Add a standard Panel control to the main content of your page.
3. Insert the following markup within the Panel markup to create the dialog window:

     <h2>Dialog</h2>
   

     <br />
   

     <span>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</span>
   

4. Use the following markup to add a WijDialog control to the page and set the TargetControlID to Panel1.

      
     <cc1:WijDialog ID="Panel1_WijDialog" runat="server"       
           TargetControlID="Panel1">       
     </cc1:WijDialog>
                   
   

5. Select View | Properties Window in the Visual Studio menu.
6. Click the drop-down list at the top of the Properties window and select Panel1_WijDialog.
7. Set the Show property to bounce.
8. Set the Hide property to slide.
9. Expand the CollapsingAnimation | Animated property and set the Effect property to fade.
10. Expand the ExpandingAnimation | Animated property and set the Effect property to explode. Your markup should look similar to this:

    <cc1:WijDialog ID="Panel1_WijDialog" runat="server"       
    

            CloseOnEscape="False" Hide="slide" Show="bounce" TargetControlID="Panel1">       
    

            <CollapsingAnimation>      
    

                <Animated Effect="fade" />      
    

            </CollapsingAnimation>
    

            <ExpandingAnimation>      
    

                <Animated Effect="explode" />        
    

            </ExpandingAnimation>
    

    </cc1:WijDialog>
    

11. Run the application and minimize/maximize, close, and open the dialog window to see the animation effects.