WebkitMask keyframes work in variants, but TypeScript gives an error

[andrewn]

I have an animation that works perfectly, but TypeScript is unhappy.

Am I doing something unsupported, or do the types need to be refined?

Code sandbox

I have the following variant animation:

const variants = {
  loading: {
    WebkitMask: [
      `radial-gradient(circle at center, blue 0%, transparent 0%)`,
      `radial-gradient(circle at center, blue 0%, transparent 100%)`,
    ],
    transition: {
      type: 'spring',
      repeat: Infinity,
      repeatType: 'reverse',
    },
  },
} as const

And the following component:

<motion.div
    variants={variants} // <-- TypeScript error here
    animate={'loading'}
  >
   <h1>Hello</h1>
</motion.div>

The animation works: Framer Motion animates the mask between 0-10% in a loop as expected.

TypeScript gives the following error:

Type '{ readonly loading: { readonly zIndex: 10; readonly WebkitMask: readonly ["radial-gradient(circle at center, blue 0%, transparent 0%)", "radial-gradient(circle at center, blue 0%, transparent 10%)"]; readonly transition: { ...; }; }; }' is not assignable to type 'Variants'.
  Property 'loading' is incompatible with index signature.
    Type '{ readonly zIndex: 10; readonly WebkitMask: readonly ["radial-gradient(circle at center, blue 0%, transparent 0%)", "radial-gradient(circle at center, blue 0%, transparent 10%)"]; readonly transition: { ...; }; }' is not assignable to type 'Variant'.
      Type '{ readonly zIndex: 10; readonly WebkitMask: readonly ["radial-gradient(circle at center, blue 0%, transparent 0%)", "radial-gradient(circle at center, blue 0%, transparent 10%)"]; readonly transition: { ...; }; }' is not assignable to type 'TargetAndTransition'.
        Type '{ readonly zIndex: 10; readonly WebkitMask: readonly ["radial-gradient(circle at center, blue 0%, transparent 0%)", "radial-gradient(circle at center, blue 0%, transparent 10%)"]; readonly transition: { ...; }; }' is not assignable to type 'MakeKeyframes<MakeCustomValueType<TargetProperties>>'.
          Types of property 'WebkitMask' are incompatible.
            Type 'readonly ["radial-gradient(circle at center, blue 0%, transparent 0%)", "radial-gradient(circle at center, blue 0%, transparent 10%)"]' is not assignable to type 'CustomValueType | WebkitMask<string | number> | (CustomValueType | WebkitMask<string | number> | undefined)[] | [...] | undefined'.
              The type 'readonly ["radial-gradient(circle at center, blue 0%, transparent 0%)", "radial-gradient(circle at center, blue 0%, transparent 10%)"]' is 'readonly' and cannot be assigned to the mutable type '[null, ...(CustomValueType | WebkitMask<string | number> | undefined)[]]'.ts(2322)
index.d.ts(1257, 5): The expected type comes from property 'variants' which is declared here on type 'IntrinsicAttributes & HTMLAttributesWithoutMotionProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & MotionProps & RefAttributes<...>'

Without the keyframes, there is no TypeScript error, but obviously there'll be no animation.

const variants = {
  loading: {
    zIndex: 10,
    WebkitMask: `radial-gradient(circle at center, blue 0%, transparent 0%)`,
    transition: {
      type: 'spring',
      repeat: Infinity,
      repeatType: 'reverse',
    },
  },
} as const

Am I doing something unsupported, or do the types need to be refined?

[AaronMassingham]

Did you ever find a solution to this error? I've stumbled across a similar issue with Framer Motion v9.0.0 and isolated the error to the 'repeatType' property. If I remove it then the error goes away. I have a work around as a solution but it would be good to know what's causing it.

[dmgcoding]

const variants: Variants = {
loading: {
zIndex: 10,
WebkitMask: radial-gradient(circle at center, blue 0%, transparent 0%),
transition: {
type: 'spring',
repeat: Infinity,
repeatType: 'reverse',
},
},
} as const

try this.