# basic panel animation

**URL:** <https://forums.fusetools.com/t/basic-panel-animation/754>\
**Category:** How-to Discussions\
**Created:** [April 15, 2016, 12:13pm UTC](https://forums.fusetools.com/t/basic-panel-animation/754 "2016-04-15T12:13:50Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![zaulin](https://avatars.discourse-cdn.com/v4/letter/z/d26b3c/32.png) [@zaulin](https://forums.fusetools.com/u/zaulin)\
**Post date:** [April 15, 2016, 12:13pm UTC](https://forums.fusetools.com/t/basic-panel-animation/754/1 "2016-04-15T12:13:50Z")

</div>

Hi,

i am quite lost with all the animations (or i haven’t found many documentation about it):

```auto
        <WhileActive>
            <Move RelativeTo="Size" Y="1" Duration="0.4" Easing="CircularInOut"/>
        </WhileActive>

        <EnteringAnimation Scale="0.35">
            <Move X="-4" RelativeTo="Size" />
        </EnteringAnimation>

```

so on… but i haven’t found how to animate the panel when changing the panel visibility from visible to collapsed

```auto
<Panel ux:Name="Panel1">
    //Panel1
</Panel>

<Panel>
    //Panel2
</Panel>

<whileTrue Value="Whatever">
    <Change Panel1.Visibility="Collapsed">
</whileTrue>

```

---

<div class="post-metadata">

**Author:** ![Kristian\_Hasselknipp](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/kristian_hasselknipp/32/549_2.png) [@Kristian\_Hasselknipp](https://forums.fusetools.com/u/Kristian_Hasselknipp)\
**Post date:** [April 15, 2016, 12:16pm UTC](https://forums.fusetools.com/t/basic-panel-animation/754/2 "2016-04-15T12:16:25Z")

</div>

In that case you have to consider changing the `Visibility` to be the animation. If you want it to resize before it collapses, you have to do that explicitly.

Something like this

```auto
<whileTrue Value="Whatever">
    <Change Panel1.Height="0" Duration="0.3" />
    <Change Panel1.Visibility="Collapsed" Delay="0.3">
</whileTrue>

```

---

<div class="post-metadata">

**Author:** ![zaulin](https://avatars.discourse-cdn.com/v4/letter/z/d26b3c/32.png) [@zaulin](https://forums.fusetools.com/u/zaulin)\
**Post date:** [April 15, 2016, 12:22pm UTC](https://forums.fusetools.com/t/basic-panel-animation/754/3 "2016-04-15T12:22:47Z")

</div>

ok!!

consider doing something like:

```auto
 <CollapsingAnimation> :) 

```

as i guess it may be quite common for example to want a bounce when collapsing a panel

---

<div class="post-metadata">

**Author:** ![Bent](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/bent/32/157_2.png) [@Bent](https://forums.fusetools.com/u/Bent)\
**Post date:** [April 15, 2016, 12:28pm UTC](https://forums.fusetools.com/t/basic-panel-animation/754/4 "2016-04-15T12:28:39Z")

</div>

You can pretty easily build that component yourself by combining basic UX building blocks though. We’ve deliberately stayed away from single-use-case abstractions like that 🙂

---

<div class="post-metadata">

**Author:** ![John](https://avatars.discourse-cdn.com/v4/letter/j/a3d4f5/32.png) [@John](https://forums.fusetools.com/u/John)\
**Post date:** [August 26, 2016, 3:13pm UTC](https://forums.fusetools.com/t/basic-panel-animation/754/5 "2016-08-26T15:13:47Z")

</div>

\> \*\*Bent Stamnes wrote:\*\* \> \>

You can pretty easily build that component yourself by combining basic UX building blocks though. We’ve deliberately stayed away from single-use-case abstractions like that 🙂

\> Sorry but I dont think that animating the “Collapsed” would be a single-use-case. It would be awesome if Change Collapsed would have a working Duration Property instead behaving like the Delay-Property. If anyone could complete the above code, how to create a custom collapsed animation, it would be VERY helpful for such noobs like me. Thank you very much Blade

---

<div class="post-metadata">

**Author:** ![Kristian\_Hasselknipp](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/kristian_hasselknipp/32/549_2.png) [@Kristian\_Hasselknipp](https://forums.fusetools.com/u/Kristian_Hasselknipp)\
**Post date:** [August 26, 2016, 5:54pm UTC](https://forums.fusetools.com/t/basic-panel-animation/754/6 "2016-08-26T17:54:02Z")

</div>

Here is a full example:

```auto
<App>
	<Panel>
		<Panel ux:Class="CollapsePanel" Duration="1" ClipToBounds="true">
			<double ux:Property="Duration" />
			<bool ux:Property="Collapse" />
			
			<WhileTrue ux:Name="collapse" Value="{Property this.Collapse}">
				<Change this.Height="0" Duration="{Property this.Duration}"/>
				<Change this.Visibility="Collapsed" Delay="{Property this.Duration}" DelayBack="0"/>
			</WhileTrue>
		</Panel>

		<StackPanel Alignment="Center">
			<CollapsePanel ux:Name="cp1" Height="100" Width="300" Color="Red">
				<Text Value="This is a collapse panel" Alignment="Center" FontSize="25"/>
			</CollapsePanel>
			<Button Text="Click to collapse">
				<WhilePressed>
					<Change cp1.Collapse.Value="true" />
				</WhilePressed>
			</Button>
		</StackPanel>
	</Panel>
</App>

```

The `CollapsePanel` class is reusable.

Hoping this helps 🙂

---

<div class="post-metadata">

**Author:** ![John](https://avatars.discourse-cdn.com/v4/letter/j/a3d4f5/32.png) [@John](https://forums.fusetools.com/u/John)\
**Post date:** [August 26, 2016, 7:32pm UTC](https://forums.fusetools.com/t/basic-panel-animation/754/7 "2016-08-26T19:32:32Z")

</div>

> **Kristian Hasselknippe wrote:**
> 
> Here is a full example:
> 
> …
> 
> The `CollapsePanel` class is reusable.
> 
> Hoping this helps 🙂

Helps??? OMG Mr Kristian Hasselknippe!!! This answers more than one of my questions.

Thanks a million. I know, its a total noob-sh\*t for you, but its a whole world for me 🙂 Thank you soo much for taking your time!!!

The support here in this community is **OUTSTANDING !**

Gratefully

Blade

---

<div class="post-metadata">

**Author:** ![Kristian\_Hasselknipp](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/kristian_hasselknipp/32/549_2.png) [@Kristian\_Hasselknipp](https://forums.fusetools.com/u/Kristian_Hasselknipp)\
**Post date:** [August 27, 2016, 8:46am UTC](https://forums.fusetools.com/t/basic-panel-animation/754/8 "2016-08-27T08:46:37Z")

</div>

Glad to hear it 🙂 Happy to help

---

<div class="post-metadata">

**Author:** ![Edwin\_Reynoso](https://avatars.discourse-cdn.com/v4/letter/e/e99b99/32.png) [@Edwin\_Reynoso](https://forums.fusetools.com/u/Edwin_Reynoso)\
**Post date:** [September 2, 2016, 12:48am UTC](https://forums.fusetools.com/t/basic-panel-animation/754/9 "2016-09-02T00:48:08Z")

</div>

This is very interesting, but if you don’t mind how would you collapse only from one side let’s say I only want the animation to only collapse from the bottom?

---

<div class="post-metadata">

**Author:** ![Kristian\_Hasselknipp](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/kristian_hasselknipp/32/549_2.png) [@Kristian\_Hasselknipp](https://forums.fusetools.com/u/Kristian_Hasselknipp)\
**Post date:** [September 2, 2016, 6:54am UTC](https://forums.fusetools.com/t/basic-panel-animation/754/10 "2016-09-02T06:54:35Z")

</div>

Edwin:

All you have to do is align it to the top. In the case above, you have to align the wrapping `StackPanel` because of the way the `StackPanel` does layout:

```auto
        <StackPanel Alignment="Top">
            <CollapsePanel ux:Name="cp1" Height="100" Width="300" Color="Red">
                <Text Value="This is a collapse panel" Alignment="Center" FontSize="25"/>
            </CollapsePanel>
            <Button Text="Click to collapse">
                <WhilePressed>
                    <Change cp1.Collapse.Value="true" />
                </WhilePressed>
            </Button>
        </StackPanel>

```