How can I delay a page transition in Webflow after an animation finishes without interrupting the animation itself?
TL;DR
- Use a Click Mouse Animation on the transition link to play your exit animation and add a Wait action matching its duration.
- After the wait, use custom code (e.g., window.location.href) to navigate to the next page, and disable default link behavior to prevent early redirection.
To delay a page transition in Webflow until after an animation finishes, you'll need to use a combination of page triggers and custom timing control.
1. Use Webflow's Page Trigger Animation
- Go to the Page in Webflow Designer.
- Open the Interactions Panel and select Page Trigger → Page Load (When Page Finishes Loading) or Page Trigger → Page Click (e.g., clicking a link) depending on your use case.
- Create an animation using the Webflow Timeline tools, including your intended effects.
2. Add a Delay to the Page Transition Link
- Select the link or button that triggers the page transition.
- Create a Click Mouse Animation for that link using Webflow Interactions.
- Inside the animation timeline, put your custom exit animation (e.g., fade out, slide).
- Add a delay using a Wait action (e.g., 0.8s or however long your animation lasts) before redirecting the user to the next page.
3. Handle Page Navigation After the Animation
- After the animation completes, go to the end of the Click Mouse Animation and add a custom embed action using Webflow’s "Custom Code" Embed feature or use a small snippet of JavaScript:
- Use a code embed with the following logic (simplified):
window.location.href = 'your-page-link.html';
- Place this in a delayed setTimeout function using an Embed element or custom code section, or directly in the interaction if using Webflow’s native "Run custom code" action.
4. Disable Default Link Behavior (Optional)
- If you're using a custom interaction to trigger navigation, be sure to disable the default link behavior:
- Set the link’s URL to
#or leave it blank, so it won't redirect before your animation runs. - Ensure your script or animation handles the navigation fully.
Summary
To delay a page transition in Webflow until an animation finishes, use a Click Mouse Animation on your link, add a Wait action, then trigger navigation with custom code. This allows smooth transition timing without interrupting your animation.