Documentation

Documentation

Error

Invalid easing type

Invalid easing type

You've received the following message:

Invalid easing type '${definition}'

Invalid easing type

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 }
)

Level up your animations with Motion+

Access to 100+ premium examples, exclusive APIs like Cursor, private Discord and GitHub, and powerful VS Code animation editing tools.

One-time payment, lifetime updates.

Stay in the loop

Subscribe for the latest news & updates.

Stay in the loop

Subscribe for the latest news & updates.

Stay in the loop

Subscribe for the latest news & updates.