nav animation with next-themes switch

[kalemiro]

I'm sorry for my lack of knowledge. I only know GSAP basics with javascript, but I'm building a multi-page app with Nextjs13.

 

I'm trying to run a layout animation on a theme switch button.

I don't even know where to start. My main problem is how to go about selecting a [data-theme="dark"] from my module.css file.

 

My ThemeSwitcher.js file:

"use client"

import {useState} from "react";
import {useTheme} from "next-themes";
import Image from "next/image";
import styles from "app/components/SidePanel.module.css";

import {gsap} from "gsap";
import {Flip} from "gsap/Flip";

gsap.registerPlugin(Flip);

const ThemeSwitcher = () => {
    const [flipState, setFlipState] = useState(false);
    const {theme, setTheme} = useTheme();

    const handleClick = () => {
        setFlipState(!flipState)
        setTheme(flipState ? "light" : "dark")
    }

    return (
        <div>
            {theme === "light" ? (
                <button onClick={handleClick}>
                    <Image
                        src={"./icons/sunIcon.svg"}
                        alt={"day icon"}
                        height={20}
                        width={20}
                        className={styles.linkIcons}
                    />
                </button>
            ) : (
                <button onClick={handleClick}>
                    <Image
                        src={"./icons/nightIcon.svg"}
                        alt={"night icon"}
                        height={20}
                        width={20}
                        className={styles.linkIcons}
                    />
                </button>
            )}
        </div>
    );
};

export default ThemeSwitcher;

.css example code:

#main {
    position: relative;
}

.sideMain {
    background-color: #EFEFEA;
    width: 3rem;
    padding: 1rem;
    height: 100vh;
    position: absolute;
    right: 0;
    bottom: 0;
}

[data-theme="dark"] .sideMain {
    background-color: #212527;
    color: #e5e5e1;
    left: 0;
}

.sideTop {
    margin-top: 4rem;
    height: 30px;
    width: 30px;
}

.sideBottom {
    position: absolute;
    bottom: 2.5rem;
}

.linkIcons {
    margin-top: 1.75rem;
}

 

Any advice on a starting place would be great

[Rodrigo]

Hi @kalemiro and welcome to the GreenSock forums!

 

Here is a simple example of a toggle switch animation using GSAP:

https://stackblitz.com/edit/vitejs-vite-vxkedv?file=src%2FApp.jsx&terminal=dev

 

Beyond that, this basically boils down to state and context (react context) management.

 

I strongly recommend you to read the resources in this page:

 Finally always use GSAP Context when using GSAP in your React apps and React environments.

 

Hopefully this helps.

Happy Tweening!