feat: add smooth animation to thought icon scroll tracking

Improved thought icon behavior on mobile with smooth 60fps animations
matching the FAB button drag experience:

CSS changes:
- Add transition properties for top/left position changes
- Use 0.2s ease-out timing for smooth, natural movement
- Add will-change: top, left for browser rendering optimization
- Applied in mobile media query (@media max-width: 1000px)

JavaScript changes:
- Wrap position updates in requestAnimationFrame()
- Cancel pending RAF before scheduling new update (debouncing)
- Sync position updates with display refresh rate
- Same pattern as FAB button smooth drag implementation

Technical details:
- RAF throttling prevents layout thrashing
- CSS transitions handle the actual animation
- Combined approach gives 60fps smooth tracking
- Icon follows avatar smoothly during scroll on mobile

Result: Thought icon smoothly tracks avatar position during scroll
instead of jumping around, with buttery smooth 60fps animation.
This commit is contained in:
Lucas 'Paperboy' Rose-Winters
2025-10-16 12:16:43 +11:00
parent 9219fe3f19
commit aef9cf812d
2 changed files with 55 additions and 39 deletions
+3
View File
@@ -3409,6 +3409,9 @@ body:has(.rpg-panel.rpg-position-left) #sheld {
#rpg-thought-icon {
/* Use transform to shift icon above and to the right of avatar */
transform: translate(50px, -45px) !important;
/* Smooth animation for position changes during scroll */
transition: top 0.2s ease-out, left 0.2s ease-out !important;
will-change: top, left;
}
/* ========================================