How can I add a 3-second delay to a lottie animation in Webflow so that it doesn't start until the page loader is no longer visible?

To add a 3-second delay to a Lottie animation in Webflow, ensuring that it starts only after the page loader is no longer visible, follow these steps:

1. Select the wrapper element containing the Lottie animation. This can be a section, div block, or any other container element.
2. In the right-hand sidebar, navigate to the "Settings" tab for the selected element.
3. Under the "Advanced" section, find the "Initial appearance" dropdown menu.
4. Choose the "Wait for page to load" option from the dropdown.
5. Webflow will automatically add a loading class to the selected element. This class will be removed once the page has loaded.
6. Now, go to the "Animations" panel in the right-hand sidebar.
7. In the "Timeline" panel, select the animation you want to delay.
8. Click on the "+" button to add a new delay keyframe to the timeline.
9. Set the delay value to 3 seconds.
10. By default, the new delay keyframe will be placed at the start of the animation. Select and drag it to the desired position in the timeline.
11. Preview your website to confirm that the Lottie animation only starts after the page loader has disappeared.

This approach allows you to create a seamless experience where the Lottie animation triggers after a specific delay, ensuring that it doesn't overlap with the page loader.

NOTE: The exact steps may vary depending on your Webflow plan and the version of Lottie you're using.

Additional questions:

1. How can I customize the appearance of a Lottie animation in Webflow?
2. Can I control the speed of a Lottie animation in Webflow?
3. How do I add interactivity to a Lottie animation in Webflow?