How can I delay the Page Load 2 animation in Webflow by 1.5 seconds to avoid clashing with Page Load 1?

Published on
September 22, 2023

To delay the Page Load 2 animation in Webflow by 1.5 seconds to avoid clashing with Page Load 1, you can follow these steps:

  1. Select the element that you want to delay the animation for.
  2. In the right-hand sidebar, go to the "Settings" tab (the gear icon).
  3. Under the "Trigger" section, click on the "Add New Trigger" button.
  4. From the dropdown menu, select "Page Load."
  5. In the delay field, enter "1500" (milliseconds) to specify a delay of 1.5 seconds.
  6. Click outside the field to apply the delay.

By following these steps, you have delayed the Page Load 2 animation by 1.5 seconds. This delay will ensure that the animations won't clash with each other and will give the Page Load 1 animation enough time to complete before the Page Load 2 animation begins.

Note: This method works for delaying page load animations generally. If you want to delay specific elements within a page load animation, you can nest the delayed elements within their own div block and apply the delay to that block instead of the entire page load animation.

Additional Questions:

  1. How do I create page load animations in Webflow?
  2. Can I customize the timing and duration of page load animations in Webflow?
  3. What other trigger types can I use for Webflow animations, besides page load?