webflow-page-transitions

To add page transition animations in Webflow using Taxi.js, configure module hooks like onPageIn and onPageOut to run entrance and exit behaviors. Promise-based waiting ensures these transition animations complete correctly during cross-page navigation.

Webflow module animations break during client-side navigation when lifecycle hooks are sequenced incorrectly. Proper ordering of onLeave, transitionOut, onPageOut, onEnter, transitionIn, and onPageIn ensures setup and teardown happen at the right time.

To skip transitions on specific links in a Webflow multi-page project, add the data-taxi-ignore attribute to the target links. This prevents Taxi.js from triggering page transition animations for those elements.

Yes, promise-based completion is needed to manage module mounting in Webflow. Promise-based waiting ensures that transitionIn and transitionOut animations fully complete before onPageIn or onPageOut triggers module setup and teardown.

The best way to preserve cross-page state during Webflow transitions is using Taxi.js module lifecycle hooks. By matching modules via data-module attributes, you maintain consistent state and behavior across multi-page navigation.