Как обновить CSS и переменную с помощью GSAP Tween

Question

Рассмотрим следующий код (не тестировался, только пример):

const item = document.getElementById('test');

let value = 0;
let finalValue = 100;

TweenMax.fromTo(
    item,
    .2,
    { '--some-var': value },
    {
        '--some-var': finalValue
        onComplete: () => {
            value = finalValue;
        }
    }
);

Приведенный выше код использует TweenMax (хотя TweenLite предпочтительнее, если он поддерживает то, что мне нужно ...) для обновления свойства --some-var CSS item. В настоящее время я использую onComplete для обновления value до finalValue анимации, однако в идеале я хотел бы сделать это одновременно с анимацией движения.

Другими словами, я бы хотел, чтобы Tween обновлял следующие два значения при запуске:

• --some-var из item
• value

Я знаю, что могу передать array на цель, но, насколько я понимаю, для переменной value будет установлен объект, подобный { '--some-var': XXX } вместо XXX.

Есть ли способ обновить два объекта, которые имеют разные структуры? то есть один - это узел DOM (обновление CSS), а другой - простая переменная ...

Answer 1

Это определенно возможно. На самом деле, Карл сделал быстрый совет, как это сделать . Просто убедитесь, что вы анимируете действительную переменную , а не элемент, где она вызывается.

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