Animation not smooth on mobile device

Hi, I have created the following codepen, which is how I was expecting it to appear on the iOS device.

See the Pen ionic Animation by sk (@sonukapoor) on CodePen.

I am using the same code in my ionic application, but its not smooth on the device at all. For example it seems that the entire control is being recreated each time. Any ideas or suggestions would really help me.

Here is how it looks on the device:


I can’t see the video, but are you testing on an Android device?

Gradients are known to render slowly on Android devices.

Regardless of device, perhaps try rendering the animation another way?