Lottie animations keep being misaligned

Get Help
1

Hi everyone!

The Lottie animations appear to be misaligned when I push my app to Testflight. When previewed them in web on my phone or using the built-in previewer, they appear ti be correctly aligned. I saw someone post about a similar problem where the solution was to move the animation to the top left corner to reset the alignment, but that does not seem to work for me.

I will post some screenshots for further clarification.

Screenshot 2023-08-16 131806
Screenshot 2023-08-16 131806394Ă—852 36.9 KB

This is the image of the Adalo builder.

Screenshot 2023-08-16 131829
Screenshot 2023-08-16 131829471Ă—891 191 KB

Web preview.

IMG_2171.PNG
IMG_2171.PNG1284Ă—2778 191 KB

IOS testflight version.

1 Like
2

I believe this may be an issue with pixel density and resizing, try aligning the lotties to each item to snap in the red guide lines.

  1. Check the height in pixels of each box
  2. Make the height an even number
  3. Make the lottie height an even number.
  4. Align to center

This should work!

1 Like
3

Thank you for providing some great ideas!

Unfortunately, these did not solve the problem. Like you said, I aligned the Lotties and the rectangles with the red guidelines and I still got the same issues. I also checked the

I wonder if this has anything to do with the view port of the device as per my tests different devices responds entirely different. For example my iPhone 14 displaces the Lotties to the left, just a bit, whereas my friend’s iPhone 12 Pro keeps some of them aligned while some of them don’t appear at all.

4

Hi there,
I wonder if this has something to do with your layout settings ?
Could you maybe share the settings on your animations and the component they’re contained in ?
I encountered some misaligned components as well and managed to solve the issue by tweaking the layout (responsive) settings.

5

Thank you for reaching out!

I didn’t use the new Adalo 2.0 custom layout, but rather just the one for the mobile only.

The components/rectangles are each 65 in width and 60 pixels in height with rounding 12.

The following links will be for the Lottie components:

I will be happy to provide any other information!

6

Since everything is aligned in previews it might be an issue coming from Testflight…
Can you test the same layout with icons/images instead of the Lottie animations ? Or maybe placing the animation without any component behind to see if the alignement is still tweaked ?

1 Like
7

I tested with the Lotties alone and they still get displaced. The same happens when I test the icons in the rectangles instead of the Lotties, both the icons and the lotties are moved slightly to the left, so the issue is probably with Testflight.

However, doesn’t Testflfight reflect how the app will look one all iOS devices, meaning that whatever I use will be displaced in production version?

8

I never released any Testflight app yet so I wouldn’t be sure.
You might also want to take a look to the apple developers’ forum where Adalo users maybe did already raised this issue :slight_smile:

1 Like
9

Already checked, there seem to be no answers.

Thank you for your help nevertheless!

Would love to hear if any other members of the community had similar issues.

10

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.