title: React Headless UI Spin Transition Night Theme Toggle
body: <p>I've been trying to make a spin animation for my night and sun icon when toggled but I just can't figure it out. I'm using Nextjs, Tailwind, and Headless UI for the animation library. I feel like I'm close any help would be very much appreciated. Thx</p>
  <p>This is what I have so far, all of the code pertaining to my question is in the handleThemeChange function:</p>
  <pre><code>import { useState, useEffect } from 'react';
  import Link from 'next/link';
  import { useRouter } from 'next/router';
  import { useTheme } from 'next-themes';
  import {
    Brain,
    MoonStars,
    RocketLaunch,
    PaperPlaneTilt,
    Sun,
    House,
    Link as LinkIcon,
  } from 'phosphor-react';
  import { Transition } from '@headlessui/react';
  
  const Navbar = () =&gt; {
    const { systemTheme, theme, setTheme } = useTheme();
    const [isShowingMoon, setIsShowingMoon] = useState(true);
    const [mounted, setMount] = useState(false);
    const [navStyles, setNavStyles] = useState(false);
  
    const router = useRouter();
  
    useEffect(() =&gt; {
      setMount(true);
      const handleNavStyles = () =&gt; {
        if (window.scrollY &gt; 45) {
          setNavStyles(true);
        } else {
          setNavStyles(false);
        }
      };
      window.addEventListener('scroll', handleNavStyles);
    }, []);
  
    const handleThemeChange = () =&gt; {
      if (!mounted) return null;
      const currentTheme = theme === 'system' ? systemTheme : theme;
      if (currentTheme === 'dark') {
        return (
          &lt;Transition
            show={isShowingMoon === true}
            enter=&quot;transform transition duration-[1000ms]&quot;
            enterFrom=&quot;opacity-0 rotate-[-120deg] scale-50&quot;
            enterTo=&quot;opacity-100 rotate-0 scale-100&quot;
            leave=&quot;transform duration-200 transition ease-in-out&quot;
            leaveFrom=&quot;opacity-100 rotate-0 scale-100 &quot;
            leaveTo=&quot;opacity-0 scale-95 &quot;
          &gt;
            &lt;MoonStars
              className=&quot;icon-style&quot;
              role=&quot;button&quot;
              onClick={() =&gt; {
                setTheme('light');
                setIsShowingMoon(false);
              }}
            /&gt;
          &lt;/Transition&gt;
        );
      } else {
        return (
          &lt;Transition
            show={isShowingMoon === false}
            enter=&quot;transform transition duration-[1000ms]&quot;
            enterFrom=&quot;opacity-0 rotate-[-120deg] scale-50&quot;
            enterTo=&quot;opacity-100 rotate-0 scale-100&quot;
            leave=&quot;transform duration-200 transition ease-in-out&quot;
            leaveFrom=&quot;opacity-100 rotate-0 scale-100 &quot;
            leaveTo=&quot;opacity-0 scale-95 &quot;
          &gt;
            &lt;Sun
              className=&quot;icon-style&quot;
              role=&quot;button&quot;
              onClick={() =&gt; {
                setTheme('dark');
                setIsShowingMoon(true);
              }}
            /&gt;
          &lt;/Transition&gt;
        );
      }
    };
  
    return (
      &lt;header className=&quot;sticky top-0 z-10 backdrop-blur-md&quot;&gt;
        &lt;nav
          className={`container flex items-center justify-between space-x-3 py-3 sm:py-5 ${
            navStyles ? 'border-color border-b' : ''
          }`}
        &gt;
          &lt;Link href={'/'} aria-label=&quot;Home Page&quot;&gt;
            &lt;House
              className={`icon-style cursor-pointer ${
                router.pathname === '/' ? 'highlight' : ''
              }`}
            /&gt;
          &lt;/Link&gt;
          &lt;Link href={'/projects'} aria-label=&quot;Projects&quot;&gt;
            &lt;RocketLaunch
              className={`icon-style cursor-pointer ${
                router.pathname === '/projects' ||
                router.pathname === '/projects/[id]'
                  ? 'highlight'
                  : ''
              }`}
            /&gt;
          &lt;/Link&gt;
          &lt;Link href={'/skills'} aria-label=&quot;Skills&quot;&gt;
            &lt;Brain
              className={`icon-style cursor-pointer ${
                router.pathname === '/skills' ? 'highlight' : ''
              }`}
            /&gt;
          &lt;/Link&gt;
          &lt;Link href={'/links'} aria-label=&quot;Links&quot;&gt;
            &lt;LinkIcon
              className={`icon-style cursor-pointer ${
                router.pathname === '/links' ? 'highlight' : ''
              }`}
            /&gt;
          &lt;/Link&gt;
  
          &lt;a href=&quot;mailto:xilaluna2@gmail.com&quot; aria-label=&quot;Send Email&quot;&gt;
            &lt;PaperPlaneTilt className=&quot;icon-style&quot; /&gt;
          &lt;/a&gt;
  
          {handleThemeChange()}
        &lt;/nav&gt;
      &lt;/header&gt;
    );
  };
  
  export default Navbar;
  </code></pre>