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