chore: optimize tilt animation by skipping offscreen updates inside hero-glass.js#208
chore: optimize tilt animation by skipping offscreen updates inside hero-glass.js#208Katotodan wants to merge 4 commits into
Conversation
Signed-off-by: DANIEL KATOTO <katotodan@gmail.com>
Signed-off-by: DANIEL KATOTO <katotodan@gmail.com>
|
🚀 Preview deployment: https://meshery-extensions.github.io/kanvas-site/pr-preview/pr-208/
|
|
The script had also scroll even listener on the widow, which were been called and update the pointer and also call the updateScene() function. Without the added check, a for loop was running every time we scroll on the page. |
|
@Katotodan Thank you for your contribution! Let's discuss this during the website call tomorrow at 5:30 PM IST | 7 AM CST Add it as an agenda item to the meeting minutes, if you would 🙂 |
There was a problem hiding this comment.
Pull request overview
This PR aims to reduce unnecessary work in the hero-glass.js tilt interaction loop by stopping scene updates when the hero section is not visible, relying more on IntersectionObserver-driven scheduling.
Changes:
- Adds an early return in
updateScene()when#herois missing or not intersecting. - Simplifies
IntersectionObserverflow and schedules updates on visibility changes. - Removes the unconditional initial
updateScene()call in favor of event-driven updates.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Signed-off-by: DANIEL KATOTO <katotodan@gmail.com>
Bhumikagarggg
left a comment
Bhumikagarggg
left a comment
There was a problem hiding this comment.
Please resolve conflicts.
|
@Katotodan Thank you for your contribution! Let's discuss this during the website call tomorrow at 5:30 PM IST | 7 AM CST Add it as an agenda item to the meeting minutes, if you would 🙂 |
Signed-off-by: APIPAWE KATOTO <katotodan@gmail.com>
| } | ||
| const relX = (pointer.x - heroRect.left) / heroRect.width - 0.5; | ||
| const relY = (pointer.y - heroRect.top) / heroRect.height - 0.5; | ||
| const clampedX = Math.max(-0.5, Math.min(0.5, relX)); |
There was a problem hiding this comment.
removing clampedX and clampedY, which can allow excessive tilt when the pointer is far from the hero area. The optimization should skip updates when the hero is offscreen, but the tilt values should still stay clamped. please revert 37 and 38 line
Notes for Reviewers
This PR improves the performance and execution flow of the tilt interaction system by reducing unnecessary computations when the hero section is not visible.
Key Changes
updateScene()when the hero element is not in viewgetBoundingClientRect) and style updatesIntersectionObserverto control when updates should runupdateScene()call in favor of event-driven updatesPerformance Impact
Note
No UI change is visible after this modification.
Signed commits