Choppy text on small movement

[bqiang-stackadapt]

Trying to create a very simple text small move-up effect, for example

const textMove = interpolate(
    frame,
    [0, 300],
    [0, 10],
    {
      extrapolateRight: 'clamp',
      extrapolateLeft: 'clamp'
    }
  );

<div
  style={{
    transform: `translateY(${textMove}%)`,
  }}
>
Some Text
</div>

But text movement is very choppy, like, it's not continuously moving. Whereas I tried this movement on image, it looks fine. Any suggestions? Thanks!

[JonnyBurger]

could it be that the percentage unit is relative to a smaller container and therefore there are less steps to animate?

Have you tried using px instead of %?

[bqiang-stackadapt]

could it be that the percentage unit is relative to a smaller container and therefore there are less steps to animate?

Have you tried using px instead of %?

Thank you for the reply, Jonny. Yes I tried px, still same. Basically I meant to let the text move up a very small distance (like) in 3 seconds. I'm using very simple interpolate

const textDrift = interpolate(frame, [0, fps * 5], [0, -10], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
    easing: Easing.inOut(Easing.ease)
  });

// style
transform: `translateY(${textDrift}px)`

The image movement looks smooth while the text one looks choppy

ProductDco.mp4

[JonnyBurger]

Interesting!
Can you try to force Chrome to use subpixel rendering?

Apply this CSS to the div: https://stackoverflow.com/questions/22097660/is-there-a-way-i-can-force-chrome-to-do-subpixel-rendering-for-a-slow-translatio

Would be interested to hear if that helps!

[bqiang-stackadapt]

Interesting! Can you try to force Chrome to use subpixel rendering?

Apply this CSS to the div: https://stackoverflow.com/questions/22097660/is-there-a-way-i-can-force-chrome-to-do-subpixel-rendering-for-a-slow-translatio

Would be interested to hear if that helps!

Thanks! I tried. still no luck 😢

[JonnyBurger]

I have found a solution and documented it!

https://www.remotion.dev/docs/troubleshooting/subpixel-rendering