webflow-lifecycle-management

Manage Webflow module lifecycles with onMount, onDestroy, onPageIn, and onPageOut hooks.

25|2|Updated Jan 18, 2025
One-click install
npx skills add https://github.com/vallafederico/webflow-dev-setup --skill webflow-lifecycle-management-vallafederico
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: webflow-lifecycle-management
Source: https://github.com/vallafederico/webflow-dev-setup/tree/main/.cursor/skills/webflow-lifecycle-management
Command: npx skills add https://github.com/vallafederico/webflow-dev-setup --skill webflow-lifecycle-management-vallafederico

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill prevents broken Webflow module behavior caused by missing initialization and incomplete teardown, which commonly leads to memory leaks, stale observers, and glitchy page transitions.

Core Features & Use Cases

  • Lifecycle Hook Management: Use onMount and onDestroy to correctly initialize and clean up resources when modules enter and leave the DOM.
  • Transition-Aware Animations: Use onPageIn and onPageOut to animate entrances and exits during page transitions without mixing concerns.
  • Leak-Prevention Checklist: Standardize cleanup of event listeners, subscriptions (Raf/Resize/Scroll), observers/tracks, GSAP instances, and timers.

Use case: when a Webflow component is mounted/unmounted across Taxi.js-style page transitions, manage GSAP animations and viewport tracking so they stop immediately on exit and never accumulate across navigations.

Quick Start

Ask for an implementation pattern that wires onMount, onPageIn, onPageOut, and onDestroy with GSAP plus proper event/subscription cleanup for a reusable Webflow module.

Frequently Asked Questions about webflow-lifecycle-management

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

FAQPage Schema
How do I prevent memory leaks in Webflow page transitions?

To prevent memory leaks in Webflow page transitions, wire onMount and onDestroy hooks to enforce cleanup of event listeners, subscriptions, GSAP instances, and timers when modules leave the DOM.

Why do GSAP animations accumulate or glitch during Webflow page navigation?

GSAP animations glitch during Webflow page navigation because missing teardown leaves active instances running. Using onPageOut hooks ensures animations stop immediately on exit and never accumulate across navigations.

What's the best way to clean up observers and subscriptions on Webflow unmount?

The best way to clean up observers and subscriptions on Webflow unmount is applying onDestroy hooks that systematically remove Raf, Resize, Scroll subscriptions, Observe, and Track instances before the component leaves the DOM.

Can I use lifecycle hooks with GSAP for Webflow module entrance and exit animations?

Yes, you can use lifecycle hooks with GSAP for Webflow modules by wiring onPageIn for transition-aware entrance animations and onPageOut for exit animations, keeping entrance and exit concerns cleanly separated.

Do I need a lifecycle management pattern for Taxi.js-style Webflow transitions?

Yes, you need a lifecycle management pattern for Taxi.js-style Webflow transitions to ensure deterministic initialization and teardown, preventing stale observers and broken module behavior when components mount and unmount across navigations.