Label jigging during animation

Question

Hi everyone
Here is a little problem I encountered: Labels are jiggling during animation, as shown in the codepen.

let board = JXG.JSXGraph.initBoard('jxgbox', {axis: false,});
let dummy = {t:0};
for(let i = 0; i < 4; i++){
  board.create('point', [()=> -4 + dummy.t, ()=> 4 -dummy.t - i], {
    showInfobox:false,
    label: {
      anchorX: 'left', 
      anchorY: 'top',
      fontSize: 30,
    },
  });
}
gsap.to(dummy, {
  ease: 'power2.inOut',
  duration:10,
  t:3,
  onUpdate: ()=> board.update()
})

https://codepen.io/ywlee/pen/yLbgxpV

The only way I can think of is to shorten the animation time

Does anyone know how to fix it? Thank you for reading my problem:)

Answer 1

My impression is that the jiggling is slightly reduced if SVG texts are used for the point labels (i.e. internal texts):

board.create('point', [()=> -4 + dummy.t, ()=> 4 -dummy.t - i], {
    showInfobox:false,
    label: {
        display: 'internal', // <-- SVG texts instead of HTML texts
        anchorX: 'left', 
        anchorY: 'top',
        fontSize: 30,
    }
});