Refactor tilt animation engine for performance and maintainability

[Katotodan]

Notes for Reviewers

Summary

This PR refactors the tilt animation engine to improve performance, reduce layout recalculations, and simplify the architecture.

The goal is to make the animation logic more scalable and maintainable while preserving the existing visual behavior.

Key Improvements

Centralized State

Introduced a state object to manage:

• pointer position
• visible targets
• cached bounding rectangles
• animation frame scheduling
• layout invalidation

This removes the need for multiple scattered variables.

Visibility-Based Updates

Added an IntersectionObserver to track visible elements.

Only elements currently in the viewport are processed during animation updates.

Cached Layout Measurements

Bounding rectangles are cached and only recalculated when necessary:

• when elements enter the viewport
• when a resize occurs
• when scroll invalidates layout

This significantly reduces calls to getBoundingClientRect().

ResizeObserver Integration

ResizeObserver is used to detect element size changes and mark the layout as dirty only when needed.

Scroll Throttling

Scroll updates are throttled using requestAnimationFrame to avoid repeated layout invalidation.

Read / Write Separation

The animation engine now clearly separates:

• Measurement phase (DOM reads)
• Render phase (DOM writes)

This helps prevent layout thrashing and improves animation smoothness.

GPU Rendering Hint

Tilt elements now receive:
This hints the browser to optimize rendering for smoother animations.

Result

The refactor improves:

• performance
• scalability
• maintainability
• animation smoothness

while preserving the existing user-facing behavior.

Visual Changes

None intended.
The tilt and floating animations should behave the same as before.

Testing

Tested locally by:

• moving the pointer across the hero section
• verifying tilt effects on [data-tilt] elements
• scrolling elements in and out of the viewport
• resizing the window

Animations behave as expected.

• This PR fixes [Extensions] Refactor hero tilt animation engine for performance and maintainability #156
  Part of Javascript: Improve animation performance #146

Signed commits

• Yes, I signed my commits.

[github-actions]

🚀 Preview deployment for PR #157

🌐 Preview URL: https://meshery-extensions.github.io/kanvas-site/pr-preview/pr-157/

This preview will be updated automatically when you push new commits to this PR.