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

When your Page Load Animation doesn't trigger after clicking internal links in Webflow, the issue is usually related to how Webflow handles page navigation within its CMS or Single Page Apps (SPAs).

1. Understand Page Load vs. Page Transition

• Page Load Animations are triggered only when the browser fully loads a new page.
• Webflow uses AJAX navigation (called "Instant Transitions" or "Page Transitions" with certain custom setups) for internal linking, which doesn't trigger a full page reload.
• As a result, Page Load Animations won't run when clicking internal links if you're using AJAX page transitions.

2. Disable AJAX Transitions

• Webflow natively reloads the page when clicking internal links unless you've added custom code to enable AJAX page transitions (like Barba.js or swup).
• If you've integrated such code, know that Webflow interactions won't reinitialize after content is swapped with AJAX unless manually re-triggered.

3. Use Link Triggers Instead

• If you're looking to animate between page navigations, consider using a Page Transition Animation:
• Create an "Exit" animation using a click trigger on your link elements.
• At the end of the animation, use custom code to delay the actual navigation (e.g., using setTimeout() with window.location.href).
• This gives the appearance of a transition effect even though it's not tied to the actual Page Load Animation trigger.

4. Check Animation Trigger Type

• Ensure your animation is set to "Page Load (When page finishes loading)" if you expect it to only fire on initial load.
• If you're expecting the animation to run every time a link is clicked and a new page is shown, this won’t work as expected unless:
• A full page reload occurs,
• Or you script reinitialization manually.

5. SPA or Same-Page Anchor Links

• If you're clicking same-page links or anchor links, those won't reload the page—so Page Load animations won't run.
• In that case, consider using scroll-based or click-based animations instead.

Summary

Webflow Page Load Animations only work on full page reloads. If you're using AJAX transitions or clicking internal links that don’t reload the page, the animation won’t trigger. Use click interactions and manual page transitions instead for smoother experiences.