learning detour: better understand gsap,timeline and lenis scroll trigger for better debugging of the project

[SCIPIO666]

Description

The Work section uses a GSAP ScrollTrigger timeline with Lenis smooth scrolling. When a user opens a project modal and closes it, the animation resets to its initial state and scrolling no longer drives the animation - the timeline becomes completely detached from scroll position.

Current workaround: Restart timeline + scroll to 83% + refresh ScrollTrigger (feels like a band-aid, not a solution).

Reproduction

1. Scroll into Work section to trigger animation (panels slide, laptop opens, chips appear)
2. Click a chip → modal opens
3. Close modal
4. Animation reset, scrolling doesn't update it

Suspected Root Causes

• ScrollTrigger losing sync with scroll position during modal open/close
• Lenis .stop()/.start() affecting ScrollTrigger tracking
• Modal overflow: hidden causing desync
• Timeline being killed or paused during modal transition

What I Need to Learn (80/20)

1. ScrollTrigger lifecycle - How it tracks scroll, what refresh()/update() do, why it detaches
2. Lenis + ScrollTrigger sync - How they interact, proper pause/resume patterns
3. React + GSAP cleanup - Proper disposal patterns
4. Debugging tools - Using markers, console logs, progress monitoring

Desired Outcome

Mental model to:

• Understand why the animation state is lost
• Fix it properly without workarounds
• Debug similar issues confidently

Milestones

• Add debug markers and logs to identify exact failure point
• Study ScrollTrigger + Lenis integration deeply
• Implement proper fix (no workarounds)
• Document learnings

Stack: React 18, GSAP 3.12, Lenis 1.0, R3F

Tags: gsap, scrolltrigger, lenis, react, animation, modal