Как синхронизировать анимацию GSAP и setInterval?

Question

[TheSnegok]

const circle = useRef(null);
	const [percent, setPercent] = useState(0);

	useLayoutEffect(() => {
		gsap.to(circle.current, {
			strokeDashoffset: 1445,
			duration: 20,
			ease: Linear.easeNone
		});
	}, []);

	useEffect(() => {
		if(percent < 99.9) {
			setTimeout(() => setPercent(percent => percent + 0.1),  20);
		} else {
			setPercent(100);
		}
	}, [percent])
return (
        <div className="loading">
				<svg
					className="loadingRing"
					version="1.1"
					xmlns="http://www.w3.org/2000/svg"
				>
					<circle ref={circle} r="230" cx="250" cy="250" />
				</svg>
				<div className="loadingText">
					<div>Loading</div>
					<div>{percent === 100 ? percent : percent.toFixed(1)}%</div>
				</div>
			</div>
)

При смене значений в setInterval всё работает по разному. Если ставлю 20, то очень долго, хотя по 0,1% в 20 мс за 20 секунд должно дойти до 100 ровно, если ставлю 12 мс, то почти в притык. Подскажите что не так и как лучше синхронизировать?

Comments

[Сергей Сергей]

Делать расчёт процентов от абсолютного времени new Date(). В самом начале определить метки абсолютного времени начала и завершения анимации, а в таймауте вычислять задаваемый процент из отношения текущего момента времени к интервалу между меток.