[Keep the same unit that the one define in the tween]

 

    this.target.style.height = this.vars.css.height ;
    this.target.style.width = this.vars.css.width ;

 

 

I just had to modify this because it seems that this.target is a node collection. Therefore I had to loop over it.

[Keep the same unit that the one define in the tween]

Thanks for the quick reply. I Will test it as soon as possible.

 

By the way, tweenmax really is a miracle.

 

Thanks again !

[Keep the same unit that the one define in the tween]

Hello,

 

As you can see in the reduce test case, if I tween the width of a div from no value to '100vw', the new value is set to '100vw'.

var div2 = document.getElementById('div2');
TweenMax.set(div2, {height: '100vw', onComplete:function(){
  div2.innerHTML = div2.style.height; // 100vw
}});

But if the value was already set in css (with the same unit), then the new one is calculate in px :

#div {
  height: 20vw;
}

var div = document.getElementById('div');
TweenMax.set(div, {height: '100vw', onComplete:function(){
  div.innerHTML = div.style.height; // ex: 1920px
}});

Is it by design ? Can I force the value to be set in the wanted unit ?

 

In my real world case, I tween the value this way

TweenMax.to('.skill', 1, {height: '4vw', width: '16vw');

I understand the need to use pixel for the tween calcul so I was hoping to be able to do this this way to re-set my value in viewport unit :

TweenMax.to('.skill', 1, {height: '4vw', width: '16vw', onComplete: function(){
            TweenMax.set('.skill', {height: '4vw', width: '16vw'});
});

But as the test case shows, it doesn't seems to work this way either.

 

 

Thanks for your time

See the Pen BovbYq by poolboy (@poolboy) on CodePen