# Any reason why animation doesn't works inside \<Each\>?

**URL:** <https://forums.fusetools.com/t/any-reason-why-animation-doesnt-works-inside-each/4647>\
**Category:** General\
**Created:** [June 22, 2017, 4:00pm UTC](https://forums.fusetools.com/t/any-reason-why-animation-doesnt-works-inside-each/4647 "2017-06-22T16:00:19Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![itai.lewin](https://avatars.discourse-cdn.com/v4/letter/i/4491bb/32.png) [@itai.lewin](https://forums.fusetools.com/u/itai.lewin)\
**Post date:** [June 22, 2017, 4:00pm UTC](https://forums.fusetools.com/t/any-reason-why-animation-doesnt-works-inside-each/4647/1 "2017-06-22T16:00:19Z")

</div>

Any reason why animation doesn’t works inside `<Each>`?

```auto
<App>
  <JavaScript>
      var Observable = require('FuseJS/Observable');
    var height = Observable(10,20,30,40,50);

      function getRandom() {
            var min = 0;
            var max = 100;
            var myRND = Math.floor(Math.random() * (max - min + 1)) + min;
            return myRND;
      }

      setInterval(function(){

          height.replaceAt(0, getRandom());
          height.replaceAt(1, getRandom());
          height.replaceAt(2, getRandom());
          height.replaceAt(3, getRandom());
          height.replaceAt(4, getRandom());

      }, 1000);

      module.exports = {
          height: height,
      }

  </JavaScript>
  <Rectangle ux:Class="MyRectangle" Margin="0" ux:Name="panel" Width="25" Height="{height}" Color="Teal" >
    <LayoutAnimation>
      <Resize RelativeTo="SizeChange" Duration="1" Vector="1"/>
    </LayoutAnimation>
  </Rectangle>

  <Panel Color="#c9e8b4" Width="145" Height="125" Dock="Bottom" Padding="10" >
    <DockPanel>

  <Each Items="{height}">
    <MyRectangle Color="Blue" Width="25" Height="{}" Dock="Left" Alignment="BottomCenter"/>
  </Each>
    </DockPanel>
  </Panel>
</App>

```

without the `<Each>` it works fine.

---

<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:** [June 22, 2017, 5:41pm UTC](https://forums.fusetools.com/t/any-reason-why-animation-doesnt-works-inside-each/4647/2 "2017-06-22T17:41:58Z")

</div>

Hi itai.lewin,

the problem is not with the `Each`. The problem is that you use `.replaceAt()` which means that the whole item at that index inside of your Observable list gets replaced - which, in turn, means that there is nothing to “animate from” or “animate to”. So the bars are just removed and then added with the new heights, without any animations.

So instead of that, what you want to do is _change the actual value_ of a single-value Observable.

While I was at it, I fixed a number of other issues with your code. Please find a clean working example below:

```auto
<App>
    <JavaScript>
    var Observable = require('FuseJS/Observable');
    var bars = [
        Observable(10),
        Observable(20),
        Observable(30),
        Observable(40),
        Observable(50)
    ];

    function getRandom() {
        var min = 0;
        var max = 100;
        var myRND = Math.floor(Math.random() * (max - min + 1)) + min;
        return myRND;
    }

    setInterval(function() {
        bars.forEach(function(b) {
            b.value = getRandom();
        });
    }, 1200);

    module.exports = {
        bars: bars,
    }
    </JavaScript>

    <Rectangle ux:Class="MyRectangle" Width="24" Color="Blue">
        <LayoutAnimation>
            <Resize RelativeTo="SizeChange" Duration="1" Vector="1" />
            <Move RelativeTo="PositionChange" Duration="1" Vector="1" />
        </LayoutAnimation>
    </Rectangle>

    <Panel Color="#c9e8b4" Height="128" Alignment="Center" Padding="16">
        <StackPanel Orientation="Horizontal" ItemSpacing="2" Alignment="HorizontalCenter">
            <Each Items="{bars}">
                <MyRectangle Height="{}" Alignment="Bottom" />
            </Each>
        </StackPanel>
    </Panel>
</App>

```