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:
@@ -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;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
|
||||
Reference in New Issue
Block a user