Apply a class in a Framer Motion tag, animate or initial prop

Question

How do I use a Framer Motion tag, and in the animate and initial props, Apply a class. Like so.

<motion.div
  initial={{ className: 'hidden' }}
  animate={{ className: 'visible' }}
>
  <div>yo</div>
</motion.div>

I HAVE to use classes as I am using tailwindcss.

I expect and hope there is a way to do this, 'cus the example I showed above, Just puts this in the rendered HTML tag style="class-name:{class_name}" which does absolutely nothing.

Thanks in advance.

Answer 1

You can use vanilla js with event

onAnimationStart()

and

onAnimationComplate()

then do your logic. References https://www.framer.com/docs/component/###onanimationstart

Answer 2

If you want to control only visibility, you can play with css attributes like

<motion.div
  initial={{ display: "none" }}
  animate={{ display: "block" }}
>
  <div>yo</div>
</motion.div>

However, there you can do more things with callback functions and javascript selectors as @Arfan mentioned:

  function onStart() {
    document.getElementById("target")?.classList.add("visible");
    document.getElementById("target")?.classList.remove("hidden");
  }
  function onEnd() {
    document.getElementById("target")?.classList.remove("visible");
    document.getElementById("target")?.classList.add("hidden");
  }
...
<motion.div
  initial="rest"
  animate="anim"
  onAnimationStart={onStart}
  onAnimationComplate={onEnd}
  id="target"
>
  <div>yo</div>
</motion.div>