border width after reverse problem

[letitbe]

Hello,  i have 1 element. He must grow in width, height and border, and he do this. But have problem after when i did reverse (i showed two case) 

1-case(icon-cursor-1): When click start and after complete animation click reverse() (after complete animation reverse) and again click start we see: border width jumping 

2-case(icon-cursor-2): When click start and after complete animation click reverse() (after complete animation reverse) , he don't return primary value for border width (default border width 3px)

P.S. if i write position 0(=0.75) for tweens, he return true value. Please help understand what i doing wrong, and how this work ?

Sorry for my English =) 

See the Pen dzKvgY by letitbe93 (@letitbe93) on CodePen

[PointC]

Is this what you need?

 

See the Pen PKaRbL by PointC (@PointC) on CodePen

Hopefully that helps. Happy tweening.

[letitbe]

No, open codepen and click on button "aftre this, jump moment" , after message "please click start"  click button "start" . 

When you click start, look on the border width, nearly 0.75 timeline, border jumps(icon-cursor do fast border  width 6px to 2px, but he don't must do this -

.to(".icon-cursor-1", 0.75, {width: 66, height: 66, rotation: 0, borderWidth: 6, ease: Power4.easeOut})
.to(".icon-cursor-1", 0.25, {borderWidth: 2}, "=-0.4");

)

See the Pen NvzYOx?editors=1010 by letitbe93 (@letitbe93) on CodePen

 

[PointC]

Sorry, I'm not understanding your question. Are you saying that the 6px to 2px animation is happening too soon? If that's the case, remove the relative position parameter.

.to(".icon-cursor-1", 0.25, {borderWidth: 2});

 

If that's not what you meant, could you provide more details?

 

Thanks.

[Carl]

I think the language barrier is causing some confusion. I'm having a lot of difficulty following this.

 

I suspect though that PointC is correct in pointing out the position parameter of "-=04"

 

 .to(".icon-cursor-1", 0.75, {width: 66, height: 66, rotation: 0, borderWidth: 6, ease: Power4.easeOut})
  .to(".icon-cursor-1", 0.25, {borderWidth: 2}, "=-0.4"); // this tween starts while the previous tween is still animating borderWidth!

 

When the second tween starts, 0.4 seconds BEFORE the previous tween ends the engine is in a situation where 2 tweens are trying to change the borderWidth at the same time. Instead of wasting CPU by having 2 tweens fighting for control the engine allows the second tween to overwrite the part of the first tween that animates borderWidth. When you reverse or play the timeline again... the borderWidth part of the first tween is killed by the overwrite.

 

The best solution is: do not schedule 2 tweens at the same time to control the same properties of the same object. You can achieve this by removing the position parameter of "-=0.4" on the second tween

 

.to(".icon-cursor-1", 0.75, {width: 66, height: 66, rotation: 0, borderWidth: 6, ease: Power4.easeOut})
  .to(".icon-cursor-1", 0.25, {borderWidth: 2}]);

 

 

Another solution is to put overwrite:"none" on the second tween.

 

.to(".icon-cursor-1", 0.75, {width: 66, height: 66, rotation: 0, borderWidth: 6, ease: Power4.easeOut})
  .to(".icon-cursor-1", 0.25, {borderWidth: 2, overwrite:"none"}, "=-0.4");

 

[letitbe]

Yes you are right, this is what I meant. Thanks for the fact that explained, to understand the principle of work is very important to me. Now I will use more consciously your product.

Thnx. PointC and Carl