Stategroup and Each

How-to Discussions
1

Hi, i’m looping some pages with Each which have inside them stateGroup animation button.
When i click to this button inside the page , it activated the same state on all other pages.
Do we have something to tell fuse to only activate this state on this specific page

2

Hi!

This shouldn’t happen. Can you share some of your code? Are you data-binding the state to JS?

3

Yes all stateGroups related are binded to js.
To fully understand my case.
This is what its looks like [giphyLink] http://gph.is/2btV1Cd .
I have 3 StateGroups
The first who handle the process of showing choosing quantity panel, showing paiement panel and closing it.
the second stateGroup handle choosing quantity
the third stateGroup its for payement process

this is what my code look like for the the first one

  <StateGroup ux:Name="ToPay" Active="{PanelsStateGroup}">
    <State ux:Name="Nothin"/>
    <State ux:Name="ChooseQuantityPanel">
      <Change PaymentPanel.Color="White" Duration="0.4" Easing="QuadraticIn" />
      <Change PaymentPanel.Height="120" Duration="0.4" Easing="QuadraticIn" />
      <Change PaymentPanel.Width="95%" Duration="0.4" Easing="QuadraticIn" />
      <Change PayementButton.Visibility="Collapsed" Duration="0.4" Easing="QuadraticIn" />
      <Change PayementButton.Opacity="0" Duration="0.4"  Easing="QuadraticIn"/>
      <Change ChoosedQuantity.Visibility="Visible" Duration="0.4" Easing="QuadraticIn" />
      <Change ChoosedQuantity.Opacity="1" Duration="0.4"  Easing="QuadraticIn"/>
    </State>
    <State ux:Name="LoadPaymentPanel">
      <Change PaymentPanel.Color="White" Duration="0.4" Easing="QuadraticIn" />
      <Change PaymentPanel.Height="185" Duration="0.4" Easing="QuadraticIn" />
      <Change PaymentPanel.Width="95%" Duration="0.4" Easing="QuadraticIn" />
      <Change PayementButton.Visibility="Collapsed" Duration="0.4" Easing="QuadraticIn" />
      <Change PayementButton.Opacity="0" Duration="0.4"  Easing="QuadraticIn"/>
      <Change ChoosedQuantity.Visibility="Collapsed" Duration="0.4" Easing="QuadraticIn" />
      <Change ChoosedQuantity.Opacity="0" Duration="0.4"  Easing="QuadraticIn"/>
      <Change PaymentProcess.Visibility="Visible" Duration="0.4" Easing="QuadraticIn" />
      <Change PaymentProcess.Opacity="1" Duration="0.4"  Easing="QuadraticIn"/>
    </State>
  </StateGroup>

this is what the js look like

var PanelsStateGroup = Observable("Nothin");

function PayementClicked(){
	QuanTityStateGroup.value = "ChooseQuantityPanel"
}

function goToPayementPanel(){
	QuanTityStateGroup.value = "LoadPaymentPanel"
}

function CloseAll(){
	QuanTityStateGroup.value = "Nothin"
}

if a state is active in one looped page , all the pages have the same state