Why doesn't the Page Load Animation work when I click on the associated links in Webflow?

If your Page Load Animation isn't triggering when clicking on links in Webflow, it’s likely due to how Webflow handles page transitions or interactions using its built-in AJAX-based page loading. Here’s how to troubleshoot and resolve this issue.

​

1. Understand Webflow’s Instant Page Loading Behavior

​

• When you navigate between pages using Webflow’s default links within the same project, Webflow often doesn’t fully reload the page—especially inside interactions-heavy sites.
• Instead, it uses AJAX-like behavior to make navigation faster, which can prevent Page Load animations from firing again.

​

2. Use “Page Load” Triggers Appropriately

​

• The "When page finishes loading" trigger only works on a full browser refresh or initial page load.
• If you're navigating via links without a hard refresh, this trigger might be skipped unless the new page forces a reload.

​

3. Ensure Link Settings Are Not Interfering

​

• If your links point to anchors/hash links (e.g., #section), they do not load a new page—thus, Page Load anims won’t trigger.
• Check if the links are external URLs or hard reloads (e.g., linking to www.site.com/page-name with full path). These will allow full reloads and trigger Page Load interactions properly.

​

4. Add "Wait for Assets to Load" Option

​

• When using the Page Load trigger, make sure you enable “Wait for assets to load” if your animations depend on images or videos.
• Go to Page Interactions, choose your Page Load animation, and check the “Wait for assets to load” box in the trigger settings.

​

5. Test with Hard Reload

​

• Try doing a Shift + Reload in your browser—this forces a full refresh. If the animation works, then it's indeed an SPA-like navigation issue.

​

6. Use Custom Code or Page Transition Workaround

​

• If you're trying to have animations between pages, consider using page transition interactions instead:
• Create an interaction with an "On Click" animation for your links (like a fade-out).
• Use custom code to delay the link navigation (e.g., use setTimeout) until the animation finishes.
• This doesn't use Page Load triggers but mimics the experience visually.

​

Summary

​

Page Load animations don't trigger on internal link clicks if the new page is loaded without a full page refresh. To fix this, ensure you're using full URLs for navigation or use a Click interaction combined with delayed transitions to simulate page loading effects.