Motion+
>Troubleshooting/ERROR

Invalid easing type

>You've received the following message
Invalid easing type '${definition}'

You're attempting to define ease with a string and receiving this error.

animate(
  element,
  { opacity: 1 },
  { ease: "pow2" }
)

Solution

By defining ease as a string, you're trying to use one of Motion's in-built easing functions. Valid strings are:

  • "linear"

  • "easeIn"

  • "easeInOut"

  • "easeOut"

  • "circIn"

  • "circInOut"

  • "circOut"

  • "backIn"

  • "backInOut"

  • "backOut"

  • "anticipate"

Alternatively, you can set ease to any JavaScript function that receives and returns a progress value.

const pow2 = p => p * p

animate(
  element,
  { opacity: 1 },
  { ease: pow2 }
)