# Animation of StateGroup in a PageControl

**URL:** <https://forums.fusetools.com/t/animation-of-stategroup-in-a-pagecontrol/6820>\
**Category:** Bug Reports\
**Created:** [October 8, 2015, 8:00pm UTC](https://forums.fusetools.com/t/animation-of-stategroup-in-a-pagecontrol/6820 "2015-10-08T20:00:24Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Cristian\_Karmy](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/cristian_karmy/32/480_2.png) [@Cristian\_Karmy](https://forums.fusetools.com/u/Cristian_Karmy)\
**Post date:** [October 8, 2015, 8:00pm UTC](https://forums.fusetools.com/t/animation-of-stategroup-in-a-pagecontrol/6820/1 "2015-10-08T20:00:24Z")

</div>

Hi, I have 6 pages in a PageControl. When I change of page the color of the header change (with a StateGroup). When I go Left to Right works fine but when I go Right to Left the color blink to other state.

I’m doing something wrong?

Here is my code?

```auto
<App Theme="Basic" Background="#333">
    <Font File="Roboto-Bold.ttf" ux:Global="Bold" />
    <Font File="Roboto-Regular.ttf" ux:Global="Medium" />
    <Font File="Roboto-Light.ttf" ux:Global="Light" />
    <DockPanel>
        <iOS.StatusBarConfig Style="Light" />
        <StatusBarBackground Dock="Top"/>
        <BottomFrameBackground Dock="Bottom"/>

        <Panel Height="60." Width="100%" Dock="Top" >
            <Text Value="PARTIDOS" FontSize="21" TextAlignment="Center" TextColor="#fff" Font="Bold" Alignment="Bottom" Margin="0,0,0,5" />
            <SolidColor ux:Name="HeaderColor" Color="#7ac8d5" />
        </Panel>

        <Panel Height="30." Width="100%" Dock="Top" >
            <SolidColor ux:Name="SubHeaderColor" Color="#7ac8d5" />
        </Panel>

        <StateGroup ux:Name="AnimacionColores" Active="1">
            <State ux:Name="1">
                <Change Target="HeaderColor.Color" Value="#7ac8d5" Duration="0.8" Easing="CubicInOut" />
                <Change Target="SubHeaderColor.Color" Value="#6ab4c1" Duration="0.8" Easing="CubicInOut" />
            </State>
            <State ux:Name="2">
                <Change Target="HeaderColor.Color" Value="#6ab4c1" Duration="0.8" Easing="CubicInOut" />
                <Change Target="SubHeaderColor.Color" Value="#5aa0ad" Duration="0.8" Easing="CubicInOut" />
            </State>
            <State ux:Name="3">
                <Change Target="HeaderColor.Color" Value="#5aa0ad" Duration="0.8" Easing="CubicInOut" />
                <Change Target="SubHeaderColor.Color" Value="#4b8d9a" Duration="0.8" Easing="CubicInOut" />
            </State>
            <State ux:Name="4">
                <Change Target="HeaderColor.Color" Value="#4b8d9a" Duration="0.8" Easing="CubicInOut" />
                <Change Target="SubHeaderColor.Color" Value="#3b7986" Duration="0.8" Easing="CubicInOut" />
            </State>
            <State ux:Name="5">
                <Change Target="HeaderColor.Color" Value="#3b7986" Duration="0.8" Easing="CubicInOut" />
                <Change Target="SubHeaderColor.Color" Value="#2b6572" Duration="0.8" Easing="CubicInOut" />
            </State>
            <State ux:Name="6">
                <Change Target="HeaderColor.Color" Value="#2b6572" Duration="0.8" Easing="CubicInOut" />
                <Change Target="SubHeaderColor.Color" Value="#21535b" Duration="0.8" Easing="CubicInOut" />
            </State>
        </StateGroup>

        <PageControl ux:Name="pages">
            <Page ux:Name="page1" Background="#fff" >
                <Text Value="1" Alignment="Center" />
                <ActivatingAnimation>
                    <Set AnimacionColores.Active="1" /> </ActivatingAnimation>
            </Page>
            <Page ux:Name="page2" Background="#fff">
                <Text Value="2" Alignment="Center" />
                <ActivatingAnimation>
                    <Set AnimacionColores.Active="2" />
                </ActivatingAnimation>
            </Page>
            <Page ux:Name="page3" Background="#fff">
                <Text Value="3" Alignment="Center" />
                <ActivatingAnimation>
                    <Set AnimacionColores.Active="3" />
                </ActivatingAnimation>
            </Page>
            <Page ux:Name="page4" Background="#fff">
                <Text Value="4" Alignment="Center" />
                <ActivatingAnimation>
                    <Set AnimacionColores.Active="4" />
                </ActivatingAnimation>
            </Page>
            <Page ux:Name="page5" Background="#fff">
                <Text Value="5" Alignment="Center" />
                <ActivatingAnimation>
                    <Set AnimacionColores.Active="5" />
                </ActivatingAnimation>
            </Page>
            <Page ux:Name="page6" Background="#fff">
                <Text Value="6" Alignment="Center" />
                <ActivatingAnimation>
                    <Set AnimacionColores.Active="6" />
                </ActivatingAnimation>
            </Page>
            </PageControl>

            <Grid ColumnData="1,1,1,1,1,1" Height="45" Dock="Bottom">
                <Style>
                    <Image Padding="7" />
                </Style>
                <Panel Background="#7ac8d5">
                    <Clicked>
                        <Set pages.Active="page1" />
                    </Clicked>
                </Panel>
                <Panel Background="#6ab4c1">
                    <Clicked>
                        <Set pages.Active="page2" />
                    </Clicked>
                </Panel>
                <Panel Background="#5aa0ad">
                    <Clicked>
                        <Set pages.Active="page3" />
                    </Clicked>
                </Panel>
                <Panel Background="#4b8d9a">
                    <Clicked>
                        <Set pages.Active="page4" />
                    </Clicked>
                </Panel>
                <Panel Background="#3b7986">
                    <Clicked>
                        <Set pages.Active="page5" />
                    </Clicked>
                </Panel>
                <Panel Background="#2b6572">
                    <Clicked>
                        <Set pages.Active="page6" />
                    </Clicked>
                </Panel>
            </Grid>
    </DockPanel>
</App>

```

---

<div class="post-metadata">

**Author:** ![Jake\_Taylor](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/jake_taylor/32/512_2.png) [@Jake\_Taylor](https://forums.fusetools.com/u/Jake_Taylor)\
**Post date:** [October 8, 2015, 8:12pm UTC](https://forums.fusetools.com/t/animation-of-stategroup-in-a-pagecontrol/6820/2 "2015-10-08T20:12:48Z")

</div>

I’ve taken a quick look myself, but the code appears to be correct. Looks like a bug to me. I’ll make a ticket internally and let you know if we find anything!

---

<div class="post-metadata">

**Author:** ![edA-qa\_mort-ora-y](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/eda-qa_mort-ora-y/32/124_2.png) [@edA-qa\_mort-ora-y](https://forums.fusetools.com/u/edA-qa_mort-ora-y)\
**Post date:** [October 9, 2015, 6:43am UTC](https://forums.fusetools.com/t/animation-of-stategroup-in-a-pagecontrol/6820/3 "2015-10-09T06:43:13Z")

</div>

We’re trying to pin down a reproduction internally (it’s possible it doesn’t happen on our newest builds). I’m uncertain whether it is a defect or a visual anomaly.

The UX code is using a combination that is not recommended:

```auto
<ActivatingAnimation>
  <Set AnimacionColores.Active="1" />
</ActivatingAnimation>

```

Placing actions inside animation triggers is a delicate thing. This action, as written, will trigger anytime the page beings activating. If you move the mouse back-and-forth a lot between pages it’ll trigger this action several times. Each of these results in a state change. Combine this with cubic easings on the colors and you can get some effects that are perhaps not intended.

A preferred approach to tying navigation progress to a state group is using a `WhileActive` trigger with a `Change` animator.

```auto
<WhileActive Threshold="0.5">
    <Change AnimacionColores.Action=1"/>
</WhileActive>

```

The `Treshold="0.5"` makes this exclusive: only one page can meet this threshold at a time. Using `Change` makes it a stable state-based animator, unlike using `Set`. The difference now is that the color change will not happen until you’ve crossed that 50% barrier during the page scrolling…

---

<div class="post-metadata">

**Author:** ![Cristian\_Karmy](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/cristian_karmy/32/480_2.png) [@Cristian\_Karmy](https://forums.fusetools.com/u/Cristian_Karmy)\
**Post date:** [October 9, 2015, 1:11pm UTC](https://forums.fusetools.com/t/animation-of-stategroup-in-a-pagecontrol/6820/4 "2015-10-09T13:11:03Z")

</div>

Thanks @edA-qa mort-ora-y but with:

```auto
<WhileActive Threshold="0.5">
  <Change AnimacionColores.Action=1"/>
</WhileActive>

```

Also blink in the animation… And now blink Left to Right and Right to Left! Maybe in the next release this is solved…

But by:

```auto
<Change AnimacionColores.Action=1"/>

```

Its Active right? Because with Action I get a error.

---

<div class="post-metadata">

**Author:** ![edA-qa\_mort-ora-y](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/eda-qa_mort-ora-y/32/124_2.png) [@edA-qa\_mort-ora-y](https://forums.fusetools.com/u/edA-qa_mort-ora-y)\
**Post date:** [October 12, 2015, 6:27am UTC](https://forums.fusetools.com/t/animation-of-stategroup-in-a-pagecontrol/6820/5 "2015-10-12T06:27:46Z")

</div>

Yes, sorry, that should have been `Active`.

Hopefully this is fixed in the next release for you. Otherwise we’ll have to look a bit further at potential incompatibilities somewhere else.