[BUG] `ease` of `animate` does not let external variables

[piscopancer]

here is the animate function

import { animate } from 'framer-motion'

// this works
animate(someElement, { rotateY: '180deg' }, { ease: [0.3, 1, 0, 1] })

// this throws type error
const e = [0.3, 1, 0, 1] // or even const e = [0.3, 1, 0, 1] as const
animate(someElement, { rotateY: '180deg' }, { ease: e })

I am sure this is a bug because animate props of motion.* elements easily accept e as the value for ease

error

No overload matches this call.
  Overload 1 of 4, '(from: Element, to: Element | GenericKeyframesTarget<Element>, options?: ValueAnimationTransition<Element> | undefined): AnimationPlaybackControls', gave the following error.
    Object literal may only specify known properties, and 'rotateY' does not exist in type 'Element | GenericKeyframesTarget<Element>'.
  Overload 2 of 4, '(value: MotionValue<{ rotateY: string; }>, keyframes: { rotateY: string; } | GenericKeyframesTarget<{ rotateY: string; }>, options?: ValueAnimationTransition<{ rotateY: string; }> | undefined): AnimationPlaybackControls', gave the following error.
    Argument of type 'Element' is not assignable to parameter of type 'MotionValue<{ rotateY: string; }>'.
      Type 'Element' is missing the following properties from type 'MotionValue<{ rotateY: string; }>': version, onChange, events, on, and 13 more.
  Overload 3 of 4, '(value: ElementOrSelector, keyframes: DOMKeyframesDefinition, options?: DynamicAnimationOptions | undefined): AnimationPlaybackControls', gave the following error.
    Type 'readonly [0.3, 1, 0, 1]' is not assignable to type 'Easing | Easing[] | undefined'.
      Type 'readonly [0.3, 1, 0, 1]' is not assignable to type 'BezierDefinition | EasingFunction | Easing[]'.
        The type 'readonly [0.3, 1, 0, 1]' is 'readonly' and cannot be assigned to the mutable type 'BezierDefinition'.ts(2769)

[mo-shawa]

Ran into the same thing, it's not ideal but spreading the array seems to work:

const e = [0.6, 0.01, 0.05, 0.95] as const

animate(someElement, { rotateY: '180deg' }, { ease: e }) // ⚠️ TS gets mad

animate(someElement, { rotateY: '180deg' }, { ease: [...e] }) // ✅ No errors

Let me know if it works for you

[piscopancer]

@mo-shawa sure it also works for me, good and quick solution, however the issue with their code is still present and current behavior is not what it should be, the bug is there

[SaeWooKKang]

I created #2817 :)