To fix the issue of inconsistent percentage scaling between the mobile and desktop versions of your Lottie animation in Webflow, you can follow the steps below:
1. Open your Webflow project and navigate to the page where the Lottie animation is located.
2. Select the element that contains the Lottie animation by clicking on it in the Designer or in the Navigator panel.
3. In the right sidebar, under the Styles tab, locate the Size section. By default, it might be set to Auto or a specific pixel value.
4. Change the Size setting from Auto or pixel value to a percentage value. For example, you can set the width and height of the element to 100%. This will ensure that the Lottie animation scales proportionally based on the parent container's width.
5. Next, click on the Animation Settings button above the Size section. It looks like a play button.
6. In the Lottie Animation Settings dialog box, you'll find a section called Scale Behavior. By default, it might be set to Auto. Change it to Percentage.
7. Once you've selected Percentage, you'll see two input fields, X and Y. These fields allow you to specify the scaling percentage for both the horizontal and vertical axes. Set these values to the desired scaling percentage you want for your Lottie animation. For example, if you want the animation to scale to 80% of its original size, set both X and Y to 80.
8. Preview the changes in both the desktop and mobile breakpoints using the Preview mode or by publishing the site and testing it on actual devices.
By setting the parent container's size to a percentage and configuring the Lottie animation's scale behavior using percentage values, you'll ensure that the animation scales consistently across different screen sizes and maintains its proportions. Additionally, it's important to test your changes across various devices and breakpoints to ensure a satisfactory viewing experience for your users.