Circular Theme Transition Animation Originates Away From Toggle Button on First Load

[AnshuuRam]

📋 Issue Description

🔍 Observed Behavior

• When opening the weather web app for the first time, the light ↔ dark mode circular transition animation does not originate from the actual theme toggle button.
• The circular mask animation appears to start from an incorrect or default position instead of the button’s location.

✅ Expected Behavior

• The circular page transition animation should always originate from the theme toggle button, including:
  • First page load
  • First theme switch
  • Subsequent toggles between light and dark mode

🔁 Steps to Reproduce

1. Open the weather web app in a new browser session or incognito mode
2. Click the light/dark mode toggle button
3. Observe the circular mask animation origin

💡 Possible Cause

• The toggle button’s position or bounding box may not be calculated correctly during the initial render
• The animation origin might be using:
  • A default viewport center
  • Cached coordinates from a previous state
  • Values computed before the DOM is fully loaded

🛠 Suggested Fix / Improvement

• Calculate the animation origin using the toggle button’s:
  • getBoundingClientRect() at click time
• Ensure the button position is recalculated after initial render (DOMContentLoaded, useEffect, or equivalent)
• Avoid hardcoded or default animation origins on first load
• Optionally, delay animation initialization until the toggle button is fully mounted and visible

---

🙌 Appreciation

This is a beautifully designed weather app with a smooth and creative theme transition 🌤️
The circular page animation adds a premium, polished feel, and this issue seems like a small edge-case improvement.
Really great work overall—enjoyed exploring the project! 👏✨

[Thakuma07]

Thanks for reporting this! 👍

You're right — the animation origin isn't correctly calculated on the first load.
It seems the button position is being read before the DOM fully settles.

I'll look into recalculating the bounding box on interaction or after mount.
Really appreciate you taking the time to write such a clear issue!