[BUG]display: 'none' can not be set

[futugyou]

when use 'useAnimate', the 'display:none' can not be set ,but other e.g.'display:inline' is ok.

package version "framer-motion": "^11.0.14"

import React, { useState, useEffect } from "react"
import { useAnimate } from "framer-motion"
...
const FlowPanel = () => {
  const [showMenu, setShowMenu] = useState(false)
  const [scope, animate] = useAnimate()
  
  useEffect(() => {
          const menus = document.getElementsByClassName("flow-panel-menu")
          if (menus.length <= 0) {
              return
          }
  
          const enterAnimation = () => {
              const current = menus[0]
              if (showMenu) {
                  animate(current, { opacity: 1, display: 'inline' }, { duration: 0.7 })
              } else {
                  animate(current, { opacity: 0, display: 'none' }, { duration: 0.7 })
              }
          }
  
          enterAnimation()
      }, [showMenu])

 return (
<div className="flow-panel-menu" ref={scope} >
                    ...
</div>
    )
}

when i set showMenu state to 'false', the 'opacity: 0' will be set correctly, but 'display' will still 'inline'.
if i write the else code like animate(current, { opacity: 0, display: 'contents' }, { duration: 0.7 }), the 'display' will set 'contents'.
i means only display: 'none' cannot be set correctly.

[AbdullahZulfikar]

So your problem is that it is not setting to none; instead, it is setting to content?

[futugyou]

So your problem is that it is not setting to none; instead, it is setting to content?

That was not what I meant,

 if (showMenu) {
                  animate(current, { opacity: 1, display: 'inline' }, { duration: 0.7 })
              } else {
                  animate(current, { opacity: 0, display: 'none' }, { duration: 0.7 })
              }

In this case, if the else branch is reached, the 'opacity: 0' will be set , but 'display' will still 'inline'

 if (showMenu) {
                  animate(current, { opacity: 1, display: 'inline' }, { duration: 0.7 })
              } else {
                  animate(current, { opacity: 0, display: 'content' }, { duration: 0.7 })
              }

In this case, if the else branch is reached, the 'opacity: 0' will be set , and 'display' is setting to 'content'.

So my conclusion is only display: 'none' cannot be set correctly.

[AndreaEsposit]

Same thing happening to us

[tien]

In my case, display property stopped working properly entirely unless you have them as part of transitionEnd

[tien]

🏓 @mattgperry

[AndreaEsposit]

Any update on this?

[debs-07]

Facing the same issue. Setting display : flex is working but display : none is not working while all other style properties are animating as expected. Any updates on this?

With transitionEnd display : none is working

[modulareverything]

I just ran into this myself upgrading from v10.16.16 to v11.1.7, suddenly my animations were looking a little weird.

Changing to transitionEnd seemed to work. I imagine this is intentional as it's mentioned here:

https://www.framer.com/motion/component/##value-types

For me, this:

<motion.span
  variants={{
    open: {
      opacity: 0,
      display: 'none',
    },
    closed: {
      opacity: 1,
      display: 'block',
    },
  }}
  animate={menuOpen ? "open" : "closed"}
  className="block"
>
  Menu
</motion.span>

became this:

<motion.span
  variants={{
    open: {
      opacity: 0,
      transitionEnd: {
        display: "none",
      },
    },
    closed: {
      opacity: 1,
      transitionEnd: {
        display: "block",
      },
    },
  }}
  animate={menuOpen ? "open" : "closed"}
  className="block"
>
  Menu
</motion.span>