Play a timeline for Each Item in a list

How-to Discussions
1

Hi

im working on a simple bot chat app .

i have a list where i put the new Message that going to be displayed . always going to be just one message in that list .
and i would like to have it have a pop up animation effect but for some reason i can’t make it work .

here the code :

<Each Items="{newMessage}" MatchKey="sender">
        <!-- New Bot Message -->
        <Rectangle ux:Template="bot" Margin="60,0,90,10" Padding="10" CornerRadius="4">
          <SolidColor Color="#ffffff" />
          <Text Value="{msg}" Color="#3e6a87" TextWrapping="Wrap"/>
          <WhileTrue Value="true">
            <Set myTimeline.TargetProgress="1" />
          </WhileTrue>
          <Timeline ux:Name="myTimeline">
    				<Scale Factor=".5" Duration=".25" Easing="CircularOut" EasingBack="CircularIn" />
    				<Scale Factor="2" Duration=".25" Delay=".25" Easing="BounceOut" EasingBack="BounceIn" />
            <Set myTimeline.TargetProgress="0" />
  			  </Timeline>
        </Rectangle>
      </Each>

so when the message going to be displayed , it should trigger the TargetProgress and run the timeline . but it’s not working .

what’s the issue ?

Thanks

2

Hi Ayoub44.

Please post a complete, ready-to-run example that we could copy-paste and play around with. Here, we don’t see what {newMessage} is, or how you manipulate it. That’s important to suggest the correct solution.

That said, I believe you should be using AddingAnimation (perhaps a RemovingAnimation too), and not a Timeline. Then it’s just a matter of correctly adding/removing/replacing the items in the backing JavaScript code and the animation should run just fine.

3

Yes ! That’s exactly what i wanted :slight_smile: … Thanks !