Failed to execute 'animate' on 'Element'

[hyesungoh]

Hi! I love your works 👍

btw I found some error log

Failed to execute 'animate' on 'Element': 'linear(0,.005,.019,.039,.066,.096,.129,.165,.202,.24,.278,.316,.354,.39,.426,.461,.494,.526,.557,.586,.614,.64,.665,.689,.711,.731,.751,.769,.786,.802,.817,.831,.844,.856,.867,.877,.887,.896,.904,.912,.919,.925,.931,.937,.942,.947,.951,.955,.959,.962,.965,.968,.971,.973,.976,.978,.98,.981,.983,.984,.986,.987,.988,.989,.99,.991,.992,.992,.993,.994,.994,.995,.995,.996,.996,.9963,.9967,.9969,.9972,.9975,.9977,.9979,.9981,.9982,.9984,.9985,.9987,.9988,.9989,1)' is not a valid value for easing

my use case

// SafeNumberFlow

import NumberFlow, { useCanAnimate } from '@number-flow/react';
import { type ElementRef, forwardRef, memo, type ComponentProps } from 'react';

type NumberFlowProps = ComponentProps<typeof NumberFlow>;
type Props = Omit<NumberFlowProps, 'children' | 'animate'>;

export const SafeNumberFlow = memo(
  forwardRef<ElementRef<typeof NumberFlow>, Props>(function SafeNumberFlow(
    { value, ...props },
    ref,
  ) {
    const canAnimate = useCanAnimate();

    return (
      <NumberFlow animated={canAnimate} value={value} ref={ref} {...props} />
    );
  }),
);


// where the error cause
<NumberFlowGroup>
  <SafeNumberFlow
    trend={-1}
    value={days}
    format={{ minimumIntegerDigits: 1 }}
  />

  <SafeNumberFlow
    trend={-1}
    value={hours}
    digits={{ 1: { max: 5 } }}
    format={{ minimumIntegerDigits: 2 }}
  />
  <SafeNumberFlow
    prefix=":"
    trend={-1}
    value={minutes}
    digits={{ 1: { max: 5 } }}
    format={{ minimumIntegerDigits: 2 }}
  />
  <SafeNumberFlow
    prefix=":"
    trend={-1}
    value={seconds}
    digits={{ 1: { max: 5 } }}
    format={{ minimumIntegerDigits: 2 }}
  />
</NumberFlowGroup>

is possible useCanAnimate missing some environment?

environment

OS: Windows
browser: Chrome 109, Desktop

[barvian]

Hi, thanks for the discussion. It seems like linear() isn't supported in this browser but the feature detection should be picking it up 🤔. Would you be able to run CSS.supports('animation-timing-function', 'linear(1,2)') in your console on this browser? I don't have access to Chrome 109 on Windows.

[hyesungoh]

Thanks to comment 🚀
I can not access either to Chrome 109 on Windows 😢

I found this issue at log