Not sure why numbers are not flowing in Svelte project

[gigsta12]

Hello,

I have a svelte project built using webpack. I recently tried to implement Numberflow but as the title implies the numbers are not flowing.

I implemented a fairly basic test (see below) just to try it out using a writable let NF = writable(0) and setting this in the NumberFlow component. Any idea where I can begin in trying to narrow down the cause?

<NumberFlow
    transformTiming={{
        // Used for layout-related transforms:
        duration: 700, easing: 'linear(...)'
    }}
    spinTiming={{
        // Used for the digit spin animations.
        // Will fall back to `transformTiming` if unset:
        duration: 700, easing: 'linear(...)'
    }}
    opacityTiming={{
        // Used for fading in/out characters:
        duration: 350, easing: 'ease-out'
    }}
    value={$NF}
/>

[barvian]

Hi 👋, this is probably my fault because I used linear(...) in the docs as an abbreviation but it's technically invalid. Does this one work for you?

<NumberFlow
    transformTiming={{
        // Used for layout-related transforms:
        duration: 750, easing: 'linear(0,0.008,0.028,0.06,0.099,0.145,0.196,0.249,0.304,0.36,0.416,0.47,0.523,0.573,0.621,0.667,0.709,0.748,0.784,0.817,0.847,0.874,0.898,0.92,0.939,0.955,0.97,0.982,0.992,1.001,1.008,1.014,1.019,1.022,1.025,1.027,1.028,1.028,1.028,1.028,1.027,1.026,1.025,1.024,1.022,1.02,1.019,1.017,1.016,1.014,1.013,1.011,1.01,1.009,1.008,1.007,1.006,1.005,1.004,1.003,1.003,1.002,1.001,1.001,1.001,1,1,1,1,1,0.999,0.999,0.999,0.999,1)'
    }}
    spinTiming={{
        // Used for the digit spin animations.
        // Will fall back to `transformTiming` if unset:
        duration: 750, easing: 'linear(0,0.008,0.028,0.06,0.099,0.145,0.196,0.249,0.304,0.36,0.416,0.47,0.523,0.573,0.621,0.667,0.709,0.748,0.784,0.817,0.847,0.874,0.898,0.92,0.939,0.955,0.97,0.982,0.992,1.001,1.008,1.014,1.019,1.022,1.025,1.027,1.028,1.028,1.028,1.028,1.027,1.026,1.025,1.024,1.022,1.02,1.019,1.017,1.016,1.014,1.013,1.011,1.01,1.009,1.008,1.007,1.006,1.005,1.004,1.003,1.003,1.002,1.001,1.001,1.001,1,1,1,1,1,0.999,0.999,0.999,0.999,1)'
    }}
    opacityTiming={{
        // Used for fading in/out characters:
        duration: 350, easing: 'ease-out'
    }}
    value={$NF}
/>

[gigsta12]

Apologies, late night copy paste from the docs. I've used your example here and recorded what is going on for some context.

New.Project.1.mp4

[barvian]

Ah, I see. What browser are you testing it in?

[gigsta12]

I just narrowed it down by creating a stripped down version of our UI framework. When testing the exact same code running on a web server using chrome as the browser, the transitions occur between numbers, but when running the code within a Chromium Embedded Framework the transitions do not occur and the result is what you could see in the video on my previous comment.

[barvian]

Hi, could you try setting the respectMotionPreference={false} prop? If that doesn't work, could you try printing the getCanAnimate() store? I suspect Chromium Embedded Framework prefers reduced motion or doesn't support the CSS features needed to animate.

[gigsta12]

Thanks so much for helping look into this.

I set the prop respectMotionPreference={false} and it didn't work

I printed the getCanAnimate() store and the result was false

[barvian]

No problem. It seems like that Chromium Embedded Framework doesn't support the required CSS features for NumberFlow to animate 🫤. Here's the caniuse for more context

[gigsta12]

Yes, confirmed CEF is configured to Chromium version 103 in this instance which does not support mod(). Any chance of supporting polyfill for such use cases?