Как настроить адаптивность анимации?

Question

[rabodis]

Подскажите пожалуйста как настроить анимацию.



Анимация начинается с левого края экрана и доезжает до блока с текстом. Если менять разрешение экрана, то блок начинает наезжать на текст, либо не доезжать. Пробовал устанавливать крайнюю точку анимации и в % и vw, все равно получается не то, что надо. Хотя бы на разрешениях 1200px, 992px, 768px. Есть ли какое-то универсальное решение для совместимости bootstrap макета и элементов с position absolute как здесь?

Answer 1

[yarnstart]

В этом случае без js никак, блоки ничего не знают друг о друге, позиционирование будет зависеть ещё и от длины текста, но можно сделать что-то подобное ( https://jsfiddle.net/8pjrd3m5/ , https://jsfiddle.net/6hmbds9f/ ) поместив в один контейнер текст и анимированный квадрат. Можете дать более подробное описание того, что нужно сделать ?