fix: optimize GSAP animations - #23
Conversation
There was a problem hiding this comment.
Pull Request Overview
This PR optimizes GSAP usage across the app by swapping out ScrollSmoother for batch-triggered fades, deferring the MediaPlayer mount until user interaction, and streamlining navbar scroll animations.
- Refactor Home page to use ScrollTrigger.batch for fade-in sections and update initial CSS classes.
- Update MediaPlayer to lazy mount on first user click, improve image loading attributes, and add ARIA labels.
- Simplify Navbar hide/show on scroll by switching to
ScrollTrigger.createand adding a direction check.
Reviewed Changes
Copilot reviewed 6 out of 7 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| frontend/src/pages/Home.tsx | Removed ScrollSmoother, implemented ScrollTrigger.batch, updated section classes |
| frontend/src/components/Playlist/MediaPlayer.tsx | Deferred mount on user interaction, added lazy-loaded images & ARIA labels |
| frontend/src/components/Navigation/Navbar.tsx | Replaced timeline with ScrollTrigger.create and direction-based transforms |
| frontend/src/components/Home/Greetings.tsx | Changed GSAP ease to sine.inOut, refactored <h1> for direct ref usage, added will-change-transform |
| frontend/src/App.tsx | Removed stale comment |
| frontend/index.html | Updated favicon path |
Comments suppressed due to low confidence (2)
frontend/src/components/Playlist/MediaPlayer.tsx:30
- [nitpick] This only listens for 'click' events, which may not fire on touch devices. Consider also listening for 'touchstart' or 'pointerdown' to ensure mounting on all user interactions.
window.addEventListener("click", onInteraction, { once: true });
frontend/index.html:5
- [nitpick] Consider adding a type attribute (e.g., type="image/x-icon") to the favicon link for clarity and better compatibility.
<link rel="icon" href="/src/assets/pictures/favicon.ico" />
| }); | ||
| } | ||
| }, | ||
| ScrollTrigger.create({ |
There was a problem hiding this comment.
Missing cleanup of the ScrollTrigger instance created here. Store the returned instance and call its kill() method in a cleanup function to prevent potential memory leaks.
| ScrollTrigger.create({ | |
| const scrollTriggerInstance = ScrollTrigger.create({ |
| }, []); | ||
|
|
||
| return ( | ||
| <div id="smooth-wrapper"> |
There was a problem hiding this comment.
[nitpick] The 'smooth-wrapper' ID is no longer used since ScrollSmoother was removed; consider cleaning up this wrapper or related styles if it's unused.
No description provided.