Skip to content

Bug: GSAP timeline instances not cleaned up in useEffect memory leak in page.jsx #307

@HamidKhan1001

Description

@HamidKhan1001

🐛 Describe the bug

Description:

In `app/page.jsx`, four GSAP timelines are created inside `useEffect` 
but never killed in the cleanup function:

- `heroTl` (line 45)
- `techStackTl` (line 109)  
- `aboutTl` (line 142)
- `downloadTl` (line 181)

The current cleanup only calls:
- `lenis.destroy()`
- `ScrollTrigger.getAll().forEach(t => t.kill())`

GSAP timelines hold references to DOM elements and tween objects 
independently of ScrollTrigger. Without calling `.kill()`, these 
accumulate on every remount causing a memory leak.

## Steps to Reproduce
1. Open app/page.jsx
2. Check the useEffect cleanup block (line 213)
3. Notice heroTl, techStackTl, aboutTl, downloadTl are never killed

## Proposed Fix
Add to the cleanup return block:
heroTl.kill();
techStackTl.kill();
aboutTl.kill();
downloadTl.kill();

<img width="3334" height="1696" alt="Image" src="https://github.com/user-attachments/assets/3c768b40-2155-4011-9d1a-b6b0eaa3cb69" />

<img width="3360" height="1650" alt="Image" src="https://github.com/user-attachments/assets/50af53a4-08fa-4434-ae15-0a4c69cd7fa6" />

## References
Related to #292 (Animation Lifecycle & Memory Safety Audit)

I'd like to work on this issue.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions