# Strange jumping between states of resizable Panel

**URL:** <https://forums.fusetools.com/t/strange-jumping-between-states-of-resizable-panel/828>\
**Category:** Bug Reports\
**Created:** [December 14, 2017, 7:39am UTC](https://forums.fusetools.com/t/strange-jumping-between-states-of-resizable-panel/828 "2017-12-14T07:39:21Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![poul.kg](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/poul.kg/32/585_2.png) [@poul.kg](https://forums.fusetools.com/u/poul.kg)\
**Post date:** [December 14, 2017, 7:39am UTC](https://forums.fusetools.com/t/strange-jumping-between-states-of-resizable-panel/828/1 "2017-12-14T07:39:21Z")

</div>

I’m trying to create panel which will have 3 states: collapsed, half, expanded. This panel will hold some other components, like chat messages etc.

I’ve implemented it in the code below. But when I go from Expanded to Half it’s fine. When I go from Half to Collapsed, it jumps up to 90% height and back to 20%. So the end height is fine, but I don’t like this jumping transition. Is this a bug or I there is something I should understand?

YouTube Video: [https://youtu.be/wKgMJg9K\_eQ](https://youtu.be/wKgMJg9K_eQ)

MainView.ux

```auto
<App>
    <JavaScript File="MainView.js" />
    <DockPanel>
        <StatusBarBackground Dock="Top" />
        <BottomBarBackground Dock="Bottom" />
        
        <Rectangle ux:Class="MyButton" Text="no text" Padding="10" Color="#eee" Margin="3">
            <string ux:Property="Text" />
            <Text Value="{ReadProperty Text}" />
        </Rectangle>

        <Panel Height="30" Dock="Bottom">
            <Rectangle Layer="Background" Color="#00e" />
        </Panel>    

        <Panel Dock="Bottom" ux:Name="messagesPanel" Height="90%">
        <DockPanel>
            <Rectangle Layer="Background">
                <Stroke Width="1" Color="#f00" />
            </Rectangle>
            <StackPanel Orientation="Horizontal" Dock="Top">
                <MyButton Text="Up" Clicked="{goUp}" />
                <MyButton Text="Down" Clicked="{goDown}" />
            </StackPanel>
            <Panel>
                <Rectangle Layer="Background">
                    <Stroke Width="1" Color="#000" />
                </Rectangle>
                <ScrollView AllowedScrollDirections="Vertical">
                    <StackPanel Alignment="Bottom">
                        <Each Items="{messages}">
                            <Rectangle Padding="10" Margin="16,0,16,6">
                                <Stroke Width="1" Color="#333" />
                                <Text Value="{text}" />
                            </Rectangle>
                        </Each>
                    </StackPanel>
                </ScrollView>
            </Panel>

            <StateGroup ux:Name="messagesPanelState" Active="Expanded">
                <State ux:Name="Expanded">
                    <!-- <Change messagesPanel.Margin="0,144,0,0" Duration="0.3" /> -->
                    <Change messagesPanel.Height="90%" Duration="0.3" />
                </State>
                <State ux:Name="Half">
                    <!-- <Change messagesPanel.Margin="0,200,0,0" Duration="0.3" /> -->
                    <!-- <Move Target="chatCanvas" Y="y(bottomToolbar)-279" Duration="0.3" /> -->
                    <Change messagesPanel.Height="55%" Duration="0.3" />
                </State>
                <State ux:Name="Collapsed">
                    <!-- <Change messagesPanel.Margin="0,400,0,0" Duration="0.3" /> -->
                    <!-- <Move Target="chatCanvas" Y="y(bottomToolbar)-79" Duration="0.3" /> -->
                    <Change messagesPanel.Height="20%" Delay="0.3" />
                </State>
            </StateGroup>
        </DockPanel>
        </Panel>

        

    </DockPanel>
</App>

```

MainView.js

```auto
var Observable = require('FuseJS/Observable');
var messages = Observable();
var dummyData = [
    { text: 'message 1' },
    { text: 'message 2' },
    { text: 'message 3' },
    { text: 'message 4' },
    { text: 'message 5' },
    { text: 'message 6' }
];
messages.addAll(dummyData);

var chatState = 2;

function goUp() {
    console.log('goUp');
    if (chatState < 2) {
        setChatState(++chatState);
    }
}

function goDown() {
    console.log('goDown');
    if (chatState > 0) {
        setChatState(--chatState);
    }
}

function setChatState(stateIndex) {
    switch (stateIndex) {
        case 2:
           messagesPanelState.goto(Expanded);
           console.log('Expanded');
           break;
       case 1:
           messagesPanelState.goto(Half);
           console.log('Half');
           break;
       case 0:
           messagesPanelState.goto(Collapsed);
           console.log('Collapsed');
           break;
       default:
           console.log('Undefined state');
    }
}

module.exports = {
    messages: messages,
    goUp: goUp,
    goDown: goDown
};

```

---

<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 14, 2017, 10:28am UTC](https://forums.fusetools.com/t/strange-jumping-between-states-of-resizable-panel/828/2 "2017-12-14T10:28:23Z")

</div>

There is no bug, that is how the animations work when you use them in the way you did.

A better approach that also results in the exact behaviour you’re after would be to use `LayoutAnimation` which describes how the element transitions between the different states. Here’s the code, based on what you posted:

```auto
<App>
    <JavaScript>
        var Observable = require('FuseJS/Observable');
        var messages = Observable();
        var dummyData = [
            { text: 'message 1' },
            { text: 'message 2' },
            { text: 'message 3' },
            { text: 'message 4' },
            { text: 'message 5' },
            { text: 'message 6' }
        ];
        messages.addAll(dummyData);

        var chatState = 2;

        function goUp() {
            console.log('goUp');
            if (chatState < 2) {
                setChatState(++chatState);
            }
        }

        function goDown() {
            console.log('goDown');
            if (chatState > 0) {
                setChatState(--chatState);
            }
        }

        function setChatState(stateIndex) {
            switch (stateIndex) {
                case 2:
                   messagesPanelState.goto(Expanded);
                   console.log('Expanded');
                   break;
               case 1:
                   messagesPanelState.goto(Half);
                   console.log('Half');
                   break;
               case 0:
                   messagesPanelState.goto(Collapsed);
                   console.log('Collapsed');
                   break;
               default:
                   console.log('Undefined state');
            }
        }

        module.exports = {
            messages: messages,
            goUp: goUp,
            goDown: goDown
        };
    </JavaScript>
    <DockPanel>
        <StatusBarBackground Dock="Top" />
        <BottomBarBackground Dock="Bottom" />
        
        <Rectangle ux:Class="MyButton" Text="no text" Padding="10" Color="#eee" Margin="3">
            <string ux:Property="Text" />
            <Text Value="{ReadProperty Text}" />
        </Rectangle>

        <Panel Height="30" Dock="Bottom" Color="#00e" />

        <Panel Dock="Bottom" ux:Name="messagesPanel" Height="90%">
            <LayoutAnimation>
                <Move Vector="1" RelativeTo="PositionChange" Duration="0.3" />
                <Resize Vector="1" RelativeTo="SizeChange" Duration="0.3" />
            </LayoutAnimation>
            <DockPanel>
                <Rectangle Layer="Background">
                    <Stroke Width="1" Color="#f00" />
                </Rectangle>
                <StackPanel Orientation="Horizontal" Dock="Top">
                    <MyButton Text="Up" Clicked="{goUp}" />
                    <MyButton Text="Down" Clicked="{goDown}" />
                </StackPanel>
                <Panel>
                    <Rectangle Layer="Background">
                        <Stroke Width="1" Color="#000" />
                    </Rectangle>
                    <ScrollView AllowedScrollDirections="Vertical">
                        <StackPanel Alignment="Bottom">
                            <Each Items="{messages}">
                                <Rectangle Padding="10" Margin="16,0,16,6">
                                    <Stroke Width="1" Color="#333" />
                                    <Text Value="{text}" />
                                </Rectangle>
                            </Each>
                        </StackPanel>
                    </ScrollView>
                </Panel>

                <StateGroup ux:Name="messagesPanelState" Active="Expanded">
                    <State ux:Name="Expanded">
                        <Change messagesPanel.Height="90%" />
                    </State>
                    <State ux:Name="Half">
                        <Change messagesPanel.Height="55%" />
                    </State>
                    <State ux:Name="Collapsed">
                        <Change messagesPanel.Height="20%" />
                    </State>
                </StateGroup>
            </DockPanel>
        </Panel>

    </DockPanel>
</App>

```