Keep the same unit that the one define in the tween

[poolboy]

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

[Diaco]

Hi poolboy 

 

yep , works as expected and you can do something like this : 

TweenMax.to(div,1,{height:'90vh',width:'50vw',
  onComplete:function(){
    this.target.style.height = this.vars.css.height ;
    this.target.style.width = this.vars.css.width ;
  }
});

[poolboy]

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

 

By the way, tweenmax really is a miracle.

 

Thanks again !

[poolboy]

 

    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.

[GreenSock]

Sorry about the delay, and thanks for bringing this to our attention. I believe it's fixed in the upcoming release of 1.18.1 which you can preview here (uncompressed): https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax-latest-beta.js

 

Better?