Проблема React Framer-Motion Overflow X. Невозможно анимировать Translate X без переполнения ⇐ CSS

[Anonymous]

Я в полном замешательстве.
Что я хочу сделать, так это анимировать 2 летящих корабля, один слева, другой справа, и они останавливаются примерно на 75% страницы каждая.
Проблема в том, что использование x/translateX в движении кадра, использование любых типов единиц вообще добавит горизонтальное переполнение. Если вы анимируете справа, они расширяют область просмотра, а когда они летят влево, они снова сжимают ее. Если вы анимируете слева, изначально область просмотра не увеличится, но когда вы добавите любое значение любого типа, используя любой тип единицы измерения в анимационной опоре, затем будет добавлено горизонтальное переполнение, которое увеличит его на величину расстояния. путешествовал.
Я попытался обернуть компонент в дополнительную оболочку и добавил overflow-x: скрыто, однако это просто создает еще одну проблему.
Я могу заставить корабль лететь из правая часть вот так:

Код: Выделить всё

        initial={{ x: '100%' }} whileInView={{ x: '12vw' }}

и сначала он будет скрыт, а затем всегда будет оставаться почти полностью слева, независимо от размера экрана или уровня масштабирования. Он расположен идеально.
Однако теперь возникает проблема с кораблем, идущим слева, скажем, я установил

Код: Выделить всё

        initial={{ x: '-100%' }} whileInView={{ x: '80vw' }}

Это будет работать при 100% увеличении на рабочем столе, но как только вы увеличите масштаб или используете адаптивный макет, он исчезнет в переполнении. Это потому, что мое окно просмотра тайно вдвое шире, а вторая половина скрыта. Поэтому мне нужно было бы установить очень низкое значение whileInView, чтобы увидеть его на маленьком экране, а на большом экране оно оказывается совершенно в неправильном положении.
У меня также есть специальный крючок, который обновляет изменения области просмотра, поэтому я попытался использовать это и множитель, чтобы установить положение whileInView, но он не учитывает дополнительную ширину, и поэтому мне снова приходится использовать значения множителя, такие как 0,1-0,2, и я застрял с тем же проблема.
Меня бы удовлетворило то, что один расположен слева, другой справа с начальной непрозрачностью 0, а затем они появляются и перемещаются по экрану мимо друг друга. Но любая комбинация начальных значений X и значений анимации X, которые я пробовал, немедленно дает переполнение X, что затем вызывает все вышеперечисленные проблемы, поскольку становится невозможным позиционировать правый корабль, если я не напишу много медиа-запросов, которые кажется излишним для простой анимации.
Я объяснил это в приведенном выше утверждении.

Подробнее здесь: https://stackoverflow.com/questions/783 ... without-ov