Help with conditional rendering?

[SheruShafiq]

Hi there! Thank you so much for this tool, it's exactly what I was looking for a little side project. Iam struggling a little with the implementation of conditional rendering, I want to glitch the text in and out each time state updates. But it isn't quite working as I want to, if I put the ref on the element that needs to be glitched itself, then the app crashes. If I wrap it, then it only remembers the size of the first element that was rendered, making the new conditionally rendered content half glitched due to wrong width. How can I do it better?

 const glitch = useGlitch({
    timing: {
      iterations: 1,
      easing: "ease-in-out",
    },
    playMode: "click",
  });

<span
            style={{
              maxWidth: "400px",
              width: "100%",
              display: "flex",
              alignItems: "center",
            }}
            ref={glitch?.ref}
          >
            {mode === "login" ? (
              <>
                <img
                  src="/noBitches.png"
                  alt="emoji"
                  style={{
                    width: "40px",
                    height: "40px",
                    marginRight: "2px",
                  }}
                />
                No account?
                <Button
                  variant="text"
                  onClick={() => setMode("signup")}
                  sx={{
                    textTransform: "none",
                    ml: "4px",
                    fontWeight: "bold",
                  }}
                >
                  Signup
                </Button>
              </>
            ) : (
              <>
                Been already browsing sauce?{" "}
                <Button
                  variant="text"
                  onClick={() => setMode("login")}
                  sx={{
                    textTransform: "none",
                    ml: "4px",
                    fontWeight: "bold",
                  }}
                >
                  Login
                </Button>
              </>
            )}
          </span>

[7PH]

Oh no @SheruShafiq , this issue completely went off my radar. Do you still have trouble for this?

I want to glitch the text in and out each time state updates.

I'm not quite sure what your intentions are. Do you mean that you want to control the glitch (put it on, or off) based on a reactive state value? Because the example you sent uses the click play mode, which will automatically trigger the glitch when the element is clicked.