webflow-page-transitions

Coordinate Taxi.js leave and enter phases with Webflow module lifecycle hooks.

25|2|Updated Jan 18, 2025

Search Tags:#page transitions #gsap #webflow #scroll behavior #taxi.js #frontend lifecycle #module initialization

Ready to run

npx skills add https://github.com/vallafederico/webflow-dev-setup --skill webflow-page-transitions-vallafederico

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: webflow-page-transitions
Source: https://github.com/vallafederico/webflow-dev-setup/tree/main/.cursor/skills/webflow-page-transitions
Command: npx skills add https://github.com/vallafederico/webflow-dev-setup --skill webflow-page-transitions-vallafederico

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It eliminates janky or inconsistent page navigation in Webflow by coordinating Taxi.js transitions with module lifecycles and asynchronous animations.

Core Features & Use Cases

Reliable transition orchestration: Runs leave and enter phases that map to module hooks, ensuring components are destroyed and initialized at the right times.
Lifecycle-driven animations: Uses onPageIn and onPageOut so GSAP (or similar) animations correctly wait for promises to resolve.
Selective navigation control: Supports ignoring specific links via data-taxi-ignore, preventing unintended transitions.
State correctness across pages: Ensures new page modules mount when their data-module matches and transitions handle scroll-to-top behavior during transitionOut.

Quick Start

Ask the assistant to explain how to add onPageIn and onPageOut hooks to a module and ensure it mounts on the target page by matching the data-module attribute.

Frequently Asked Questions about webflow-page-transitions

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I fix janky page transitions in Webflow using Taxi.js?▼

Fix janky Webflow page transitions by coordinating Taxi.js leave and enter phases with module lifecycle hooks. This ensures components are destroyed and initialized at the correct times, preventing inconsistent navigation.

Why do my GSAP animations break during Webflow page transitions?▼

GSAP animations break during Webflow page transitions when async hooks do not return Promises. Using onPageIn and onPageOut hooks ensures animations correctly wait for promises to resolve before proceeding.

How do I prevent Taxi.js from triggering a transition on specific Webflow links?▼

Prevent Taxi.js transitions on specific Webflow links by adding the data-taxi-ignore attribute to the anchor tags. This selectively disables the transition manager for those elements.

How do I ensure my JavaScript modules mount correctly after a Webflow page transition?▼

Ensure JavaScript modules mount correctly after a Webflow page transition by matching the data-module attribute on the destination page. The transition manager handles initialization when these attributes align.

Does Taxi.js handle scroll-to-top behavior automatically during Webflow navigation transitions?▼

Yes, Taxi.js handles scroll-to-top behavior automatically during the transitionOut phase of Webflow navigation. This ensures the new page loads with the viewport correctly positioned.

What causes mismatched module markup issues when debugging Webflow navigation transitions?▼

Mismatched module markup issues during Webflow navigation transitions are caused by missing or incorrect data-module attributes on the destination page, preventing the transition manager from properly initializing the expected components.