How can I delay a page transition in Webflow after an animation finishes without interrupting the animation itself?
TL;DR
- Create a Webflow exit animation triggered by a class (e.g., starting-exit) without immediately navigating away.
- Add JavaScript to delay link navigation until after the animation by assigning a data-delay-link attribute and timing the redirect with setTimeout.
To delay a page transition in Webflow until after an animation finishes, you need to coordinate your animation timings with a custom redirect trigger — typically using Webflow Interactions and a short script.
1. Create a Finishing Animation Trigger
- Use a Webflow Interaction (e.g., Page Trigger or Element Trigger) that runs your exit animation.
- Assign a class or a custom attribute (like
id="exit-trigger") to the element where the animation ends. - Finish your animation with a Show/Hide, Move, Opacity, or any visual change.
- Make sure the animation’s final element remains on the page when it's complete (it shouldn't be removed or navigated away prematurely).
2. Assign a Timed Redirect with JavaScript
Webflow interactions cannot natively trigger a delayed page redirect, so use JavaScript to delay navigation after the animation.
Add an Embed element at the bottom of the page (before
</body>) with this inline script:```html
```
3. Apply Exit Animation via Class
- In Page Transitions, add a class like
starting-exitto the<body>when the page is clicked. - Create an animation for Body (All Pages) that watches for this class (
starting-exit) and plays your exit animation. - Ensure the delay time in the script matches the total animation duration, otherwise it may interrupt midway.
4. Update Links to Use Custom Attribute
- Select all links that should trigger this delayed transition.
- In the Settings Panel, add a custom attribute:
- Name:
data-delay-link - Value: (leave blank)
Summary
Use a combination of Webflow interactions, a custom class trigger, and a JavaScript-based delay to control page navigation only after your exit animation has finished. This keeps the animation complete and smooth before transitioning to the next page.