# Panel Animation

**URL:** <https://forums.fusetools.com/t/panel-animation/1287>\
**Category:** How-to Discussions\
**Created:** [December 5, 2017, 5:20pm UTC](https://forums.fusetools.com/t/panel-animation/1287 "2017-12-05T17:20:10Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Denise](https://avatars.discourse-cdn.com/v4/letter/d/82dd89/32.png) [@Denise](https://forums.fusetools.com/u/Denise)\
**Post date:** [December 5, 2017, 5:20pm UTC](https://forums.fusetools.com/t/panel-animation/1287/1 "2017-12-05T17:20:10Z")

</div>

Hi,  
how can i make the “menu” panel appear with an animation? (i’m adding the animation i’d like to replicate)

```auto
<App>
	<DockPanel>
		<Panel Dock="Top" Height="60" Color="#fff">
			<Grid Columns="1*,1*">
				<Text Value="Element 1" Alignment="VerticalCenter" Margin="20,0,0,0"/>
				<Text Value="Element2" TextAlignment="Right" Alignment="VerticalCenter" TextColor="#000" Margin="0,0,20,0" ux:Name="returnCart">
					<Clicked>
						<Show TargetNode="menu" />
						<Show TargetNode="overlay" />
					</Clicked>
				</Text>
			</Grid>
		</Panel>

		<Rectangle Height="100" Layer="Overlay" Alignment="TopRight" Color="#fff" Margin="10" ux:Name="menu" Visibility="Hidden">
			<Grid Rows="1*,1*" Margin="20,0">
				<Text Value="Option 1" Alignment="VerticalCenter"/>

				<Text Value="Option 2" Alignment="VerticalCenter"/>
			</Grid>

		</Rectangle>

		<Panel Color="#0004" Layer="Overlay" Visibility="Hidden" ux:Name="overlay">
			<Clicked>
				<Hide TargetNode="menu"/>
				<Hide TargetNode="overlay"/>
			</Clicked>
		</Panel>
	</DockPanel>
</App>

```

- [Attached MP4 file](https://s3.us-east-2.amazonaws.com/fuse-legacy-forum-assets/oUyh1doM70sK-image-1512494386498.mp4)

Thank you!

---

<div class="post-metadata">

**Author:** ![Uldis](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/uldis/32/657_2.png) [@Uldis](https://forums.fusetools.com/u/Uldis)\
**Post date:** [December 6, 2017, 8:13am UTC](https://forums.fusetools.com/t/panel-animation/1287/2 "2017-12-06T08:13:14Z")

</div>

You will want to use [LayoutAnimation](https://www.fusetools.com/docs/fuse/triggers/layoutanimation).

Here’s a little proof of concept, by no means perfect but at least shows you the approach:

```auto
<App>
    <WhileTrue ux:Name="showMenu">
        <Change overlay.Visibility="Visible" />
        <Change menu.Width="128" />
        <Change menu.Height="80" />
    </WhileTrue>

    <DockPanel>
        <Panel Dock="Top" Height="60" Color="#fff">
            <Grid Columns="1*,1*">
                <Text Value="Element 1" Alignment="VerticalCenter" Margin="20,0,0,0"/>
                <Text Value="Element2" TextAlignment="Right" Alignment="VerticalCenter" TextColor="#000" Margin="0,0,20,0" ux:Name="returnCart">
                    <Clicked>
                        <Toggle Target="showMenu" />
                    </Clicked>
                </Text>
            </Grid>
        </Panel>

        <Rectangle ux:Name="menu" Width="0" Height="0" Layer="Overlay" Alignment="TopRight" Color="#fff" Margin="10" ClipToBounds="true">
            <LayoutAnimation>
                <Move RelativeTo="WorldPositionChange" Vector="1" Duration="0.42" Easing="QuadraticInOut" />
                <Resize RelativeTo="SizeChange" Vector="1" Duration="0.42" Easing="QuadraticInOut" />
            </LayoutAnimation>
            <StackPanel Margin="20,0" Padding="10" ItemSpacing="20" Alignment="BottomLeft">
                <Text Value="Option 1" />
                <Text Value="Option 2" />
            </StackPanel>
            <Clicked>
                <Toggle Target="showMenu" />
            </Clicked>
        </Rectangle>

        <Panel ux:Name="overlay" Color="#0004" Layer="Overlay" Visibility="Hidden">
            <Clicked>
                <Toggle Target="showMenu" />
            </Clicked>
        </Panel>
    </DockPanel>
</App>

```

---

<div class="post-metadata">

**Author:** ![Denise](https://avatars.discourse-cdn.com/v4/letter/d/82dd89/32.png) [@Denise](https://forums.fusetools.com/u/Denise)\
**Post date:** [December 6, 2017, 10:58am UTC](https://forums.fusetools.com/t/panel-animation/1287/3 "2017-12-06T10:58:39Z")

</div>

Thanks a lot 🙂