svg text wiggling(shaking) problem during the transform animation

Question

During the transform animation, the text begins to shaking, after research, I realized that it depends on container viewport. If the viewport is small, then we can see that the text is shaking, if viewport is big, the text does not start shaking and animation runs smoothly.

Small viewport example:

const groupList = document.querySelectorAll("svg g");
const container = document.querySelector("#container");

const containerViewport = [20,20];
// const containerViewport = [100,100];

container.style.width = `${containerViewport[0]}%`;
container.style.height = `${containerViewport[1]}%`;

// cannot change this
const increaseRatio = 0.1;

const values = [
    30, 70, 110
]

for (const [key, node] of groupList.entries()) {
    node.setAttribute("transform", `translate(29, ${values[key]})`)
}

setInterval(()=>{
    for (const [key, node] of groupList.entries()) {
        values[key] = values[key] + increaseRatio;
        node.setAttribute("transform", `translate(29, ${values[key]})`)
    }
},20)

 .tick {
    color: #fff;
}
.line {
    stroke: #fff;
}

Big viewport example:

const groupList = document.querySelectorAll("svg g");
const container = document.querySelector("#container");

// const containerViewport = [20,20];
const containerViewport = [100,100];

container.style.width = `${containerViewport[0]}%`;
container.style.height = `${containerViewport[1]}%`;

// cannot change this
const increaseRatio = 0.1;

const values = [
    30, 70, 110
]

for (const [key, node] of groupList.entries()) {
    node.setAttribute("transform", `translate(29, ${values[key]})`)
}

setInterval(()=>{
    for (const [key, node] of groupList.entries()) {
        values[key] = values[key] + increaseRatio;
        node.setAttribute("transform", `translate(29, ${values[key]})`)
    }
},20)

 .tick {
    color: #fff;
}
.line {
    stroke: #fff;
}

I tried to increase svg viewBox, but it does not matter, text still shaking.

Video demonstration: https://youtu.be/d_aIIDfCHB0

svg text wiggling(shaking) problem during the transform animation

0 Answers