TimelineLite кеширование значений tweens при изменении размера

Question

У меня есть сайт, где я использую TimelineLite, приостановленный и выполненный вручную ход с помощью полосы прокрутки.

У меня также есть 5 пауз, замусоренных на временной шкале, чтобы я мог нажать кнопку и посмотреть «сцену» временной шкалы.

Каждая анимационная сцена в основном подстраивается под верхнюю часть экрана вверху, а следующий элемент находится на экране снизу.

Все работает нормально.

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

Моя временная шкала состоит из TweenLite.to(...) подростков. Например, если высота моего браузера составляет 700 пикселей, а я теневой сцены 1 из вида и сцены 2 в поле зрения, когда я изменяю размер и использую timeline.reverse();, я вижу сцену 2 назад назад до 700 пикселей. (Сцена 2 абсолютно позиционируется с translateY, установленным на 100%) Однако, так как моя анимация использует y: '100%', я бы ожидал, что она изменится на 100%, а не на это старое значение для предварительного изменения 700 пикселей.

Как ни странно, сцена 1, которая первоначально находилась в 0,0 и подвигалась до 0,-100%, по-прежнему ценится до значения процента, так что один выглядит нормально.

Так что я нахожу очень странным, что сцена 2 движется в пикселях, когда я устанавливаю процентное значение, а сюжет 1 - в процентах.

Что происходит и как я могу предотвратить это кеширование в моей анимации?

Я уже пробовал invalidate(), kill(), clear() и затем установить сроки для null, а затем вставив новые подростки на новый график, но как-то эти значения подростковые все еще существуют.

Я в затруднении. Любая помощь будет принята с благодарностью.

Answer 1

Отвечая на мой собственный вопрос, поскольку правильного ответа не существует. GSAP сохраняет данные твинов на фактическом элементе DOM. Несмотря на то, что я установил временную шкалу или tweens равным null, это не повлияло, потому что, когда я подстраивал один и тот же элемент, он проверял бы элемент DOM, если бы он сохранял ранее сохраненные переменные GSAP.

Чтобы исправить это, мне пришлось вручную сбросить переменную элемента DOM.

Если это проблема, проверьте переменную ._gsTransform на элементе. Вы увидите некоторые значения x, y, которые вы можете вручную установить на 0 или все, что вам нужно, чтобы установить его.

Answer 2

Я думаю, что вы должны использовать это yPercent анимировать ваши подросток вместо абсолютных значений пикселей или вместо того, чтобы просто анимировать y собственности.

Что делает yPercent (и xPercent), так это то, что они всегда будут выравнивать ваш элемент независимо от размера экрана, следовательно, реагировать, исходя из значения, которое вы предоставляете.

Here пример сделаны GSAP самих ребят, которые, судя по всему, и тем, что я был в состоянии понять из Вашего вопроса, на самом деле очень близко к вашей ситуации, а также.

Существует также video tutorial по Петр Tichy, который объясняет различия между использованием x и xPercent.

P.S. Можете ли вы поделиться этим веб-сайтом, над которым вы работаете, или подготовить скрипку или код, изолируя проблему? Это поможет нам предложить точное решение.