Запретить div «прыгать» при анимации прокрутки

Ваш CSS:

.about-left {
  ...
  left: 18%;
  ...
}

Ваш js:

$horizontal.css({
    'right': position
});

Попробуйте использовать в обоих «левых» или в обоих «правых».

или добавьте в класс .about-left "text-align: right;"

Почему ваш Codepen не показывает прокрутку

1) Для абсолютного позиционирования требуется родительский элемент с позицией relative. Вероятно, упрощая ваш код для этого вопроса и Codepen, ваш .main div потерял это. Я добавил его обратно.

2) Когда это все еще не заработало, я проверил консоль разработчика и заметил ошибку о тегах <script>. Ваш Codepen включает их в панель JS, оказывается, они не требуются и на самом деле вызывают проблему. Я удалил их.

Почему ваша анимация прыгает

Короче говоря, это просто математическая задача. Ваш .about-left стиль начинается с left: 18%;. При прокрутке, которая переопределяется встроенным стилем с помощью right: <something>, где <something> изменяется в зависимости от положения прокрутки. Самое первое значение этого <something> резко отличается от начальной позиции left: 18%;, поэтому элемент прыгает по экрану. Я не пытался разобраться в деталях вашей математики прокрутки, чтобы понять, почему, так как есть более простое решение.

Самый простой вариант — использовать единый механизм позиционирования изначально и при прокрутке. Для начального положения left: 18%; можно также выразить как:

right: calc(82% - 200px);

Простое использование 82% помещает сторону правильно блока, содержащего элемент, на 82% от правой стороны страницы, но на самом деле нам нужна сторона блока осталось, поэтому мы должны вычесть ширину этого блока. В вашем Codepen это 200 пикселей, хотя это, вероятно, зависит от вашего окончательного стиля и может отличаться в вашем реальном коде (например, ваше видео показывает красивую фигурную скобку, а не квадратную в Codepen). Придется подстраиваться по мере необходимости.

Затем я обновил ваш код прокрутки JS, чтобы изменить позицию, начиная с той же начальной позиции:

$horizontal.css({
    'right': 'calc(82% - 200px + ' + position + 'px)'
});

Пока ваше самое первое значение position относительно невелико, первый ход будет на небольшом расстоянии от начальной точки.

Обратите внимание, что вы должны использовать кавычки вокруг calc() и снять кавычки с переменной position JS.

Обновленный, рабочий Codepen. Анимация довольно быстрая, я имею в виду, что она перемещается за пределы экрана быстро и довольно большими прыжками, хотя, конечно, вы можете настроить значение приращения, изменив свои математические вычисления (следите за записанными значениями положения в консоли).