How to implement a seamless animation?

This is I'm working on:

I have one row of Labels in a 'HorizontalStackLayout'.

My goal is to use 'HorizontalStackLayout.TranslationX' to make a seamless loop of scrolling Labels, but I can't make it right.

The animation has jerky movements and isn’t smooth, and I’m not sure how to fix it.

private async void ContentView_Loaded(object sender, EventArgs e) { await Task.Delay(500); tempWidth = this.Width; Dispatcher.StartTimer(TimeSpan.FromMilliseconds(16), () => { TickStrip(); return true; }); } float currentPosition = 0, labelSpeed = 1.5f, LabelWidth = 52, tempWidth; private void TickStrip() { if (currentPosition >= 0) { var item = horizontalStackLayout.Children.Last(); horizontalStackLayout.Children.RemoveAt(horizontalStackLayout.Children.Count - 1); horizontalStackLayout.Children.Insert(0, item); // Apply translation to create a continuous scrolling effect currentPosition = (float)-(LabelWidth); } else { currentPosition += labelSpeed; } horizontalStackLayout.TranslationX = currentPosition; }

This is how I created these Labels.

private async void AddOneRowLabels() { // Assuming 44 labels fit across the screen at once double labelCount = tempWidth / 52; for (int i = 0; i < labelCount; i++) { var label = new Label(); label.Text = (i + 1).ToString(); label.WidthRequest = 44; horizontalStackLayout.Children.Add(label); } horizontalStackLayout.TranslationX = currentPosition = (float)-tempWidth; }

I have a style:

<Style TargetType="Label"> <Setter Property="FontSize" Value="Large"/> <Setter Property="Margin" Value="4, 0"/> <Setter Property="HorizontalTextAlignment" Value="Center"/> <Setter Property="VerticalTextAlignment" Value="Center"/> </Style>