Плавная анимация?
"position: absolute" при ре-рендере триггерит одновременно 3 слоя (лейаут, paint, composite), что для браузера очень трудозатратно (https://csstriggers.com/)
в таким случаях для позиционирования лучше юзать transform: translate, он триггерит только "paint".
+ можно навесить will-change, чтобы подготовить браузер к перерисовке.
+ можно заставить браузер производить рендеринг на GPU - transform: translateZ(0);
Все намного проще, подключаешь GSAP и в примерах посмотри как анимировать элементы там получится меньше строк чем в codepen примере.
Через скрипт этот что угодно сможешь анимировать