How can I dynamically modify the width of a Lottie animation?

[CainLuo]

Which Version of Lottie are you using?

Lottie 4.4.1

Expected Behavior

The desired effect is to be able to go from the far left of the screen to the far right, depending on the size of the different screens.

Actual Behavior

Since the lottie json file is given a width of 375, some iPhones will not display it correctly, and the left and right sides will be spaced apart.

I tried:

I tried changing the contentMode of the LottieAnimationView to scaleAspectFill and setting masksToBounds to false, which correctly starts at the edge of the screen and ends at the edge of the screen, but causes the animation layer to become larger.

Animation JSON

{"nm":"Untitled file","ddd":0,"h":32,"w":375,"meta":{"g":"@lottiefiles/creator 1.7.1"},"layers":[{"ty":4,"nm":"Shape Layer - SVG","sr":1,"st":0,"op":300,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[16,16]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[-16,16],"t":0},{"s":[392,16],"t":298}]},"r":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0],"t":0},{"s":[1080],"t":298}]},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}},"shapes":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[-0.14260000000000161,-0.10200000000000031],[-0.17379999999999995,-0.02880000000000038],[0,0],[-0.12449999999999761,-0.07099999999999973],[-0.08699999999999974,-0.11300000000000132],[-0.03570000000000206,-0.13729999999999976],[0.021100000000000563,-0.14010000000000034],[0.17070000000000007,-0.16970000000000063],[0,0],[0.055399999999998784,-0.16350000000000264],[-0.02949999999999875,-0.16980000000000217],[0,0],[0.032099999999999795,-0.1373000000000033],[0.08340000000000103,-0.1144999999999996],[0.12170000000000059,-0.07410000000000139],[0.14119999999999777,-0.02230000000000132],[0.21280000000000143,0.10719999999999885],[0,0],[0.1789000000000005,0],[0.15829999999999878,-0.0821000000000005],[0,0],[0.2757000000000005,0.0823999999999998],[0.13839999999999897,0.24879999999999924],[-0.03608000000000011,0.23260000000000147],[0,0],[0.05530000000000079,0.1634999999999991],[0.1272000000000002,0.11850000000000094],[0,0],[0.046949999999999825,0.19509999999999827],[-0.0638399999999999,0.1905000000000001],[-0.15571999999999964,0.12930000000000064],[-0.20145999999999997,0.029899999999999594],[0,0],[-0.14259999999999984,0.10210000000000008],[-0.08139999999999858,0.15390000000000015],[0,0],[-0.1637000000000004,0.09220000000000006],[-0.18869999999999898,0],[-0.16370000000000218,-0.09220999999999968],[-0.09559999999999746,-0.16005999999999965]],"o":[[0,0],[0.08139999999999858,0.15390000000000015],[0.1424999999999983,0.10210000000000008],[0,0],[0.14269999999999783,0.017999999999998906],[0.12460000000000093,0.07099999999999973],[0.08689999999999998,0.11289999999999978],[0.03569999999999851,0.1372],[-0.03539999999999921,0.23629999999999995],[0,0],[-0.12709999999999866,0.11850000000000094],[-0.055400000000002336,0.1634999999999991],[0,0],[0.02400000000000091,0.13889999999999958],[-0.03219999999999956,0.1372],[-0.08329999999999771,0.1144999999999996],[-0.12170000000000059,0.07410000000000139],[-0.23640000000000327,0.03549999999999898],[0,0],[-0.158299999999997,-0.0821000000000005],[-0.17889999999999873,0],[0,0],[-0.2555999999999994,0.13100000000000023],[-0.2756999999999987,-0.08249999999999957],[-0.10890999999999984,-0.2093999999999987],[0,0],[0.02949999999999875,-0.16980000000000217],[-0.05540000000000056,-0.16350000000000264],[0,0],[-0.14383999999999997,-0.14199999999999946],[-0.04695999999999945,-0.19510000000000005],[0.0638399999999999,-0.19040000000000035],[0.15572000000000052,-0.12930000000000064],[0,0],[0.17379999999999995,-0.02880000000000038],[0.14250000000000007,-0.10200000000000031],[0,0],[0.09560000000000102,-0.16005999999999965],[0.1637999999999984,-0.09220999999999968],[0.188600000000001,0],[0.16369999999999862,0.09220000000000006],[0,0]],"v":[[16.8832,7.19215],[19.0116,11.2533],[19.352,11.6425],[19.8331,11.8415],[24.3885,12.4846],[24.7934,12.6194],[25.1138,12.8983],[25.2996,13.2772],[25.3219,13.6975],[25.0045,14.3223],[21.7,17.5014],[21.422,17.931],[21.3826,18.4386],[22.1668,22.9226],[22.1544,23.3408],[21.9794,23.7221],[21.6689,24.0077],[21.2706,24.1537],[20.5798,24.0436],[16.5098,21.9302],[15.9964,21.8053],[15.483,21.9302],[11.4131,24.0436],[10.5842,24.1192],[9.9381,23.6025],[9.82608,22.9226],[10.6103,18.4386],[10.5709,17.931],[10.2928,17.5014],[6.98838,14.3223],[6.69656,13.8068],[6.72231,13.217],[7.05812,12.728],[7.6044,12.4846],[12.1598,11.8415],[12.6409,11.6425],[12.9813,11.2533],[15.0163,7.19215],[15.412,6.80722],[15.9498,6.66656],[16.4875,6.80722],[16.8832,7.19215]]}}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill","c":{"a":0,"k":[0.7922,0.7255,0.5529]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 2","it":[{"ty":"el","bm":0,"hd":false,"nm":"Ellipse 1","d":1,"p":{"a":0,"k":[16,16]},"s":{"a":0,"k":[32,32]}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill","c":{"a":0,"k":[1,1,1]},"r":1,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]}],"ind":1}],"v":"5.7.0","fr":60,"op":300,"ip":0,"assets":[]}