Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
letitbe

border width after reverse problem

Recommended Posts

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

Link to comment
Share on other sites

Is this what you need?

 

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

Hopefully that helps. Happy tweening.

:)

  • Like 2
Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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.

  • Like 4
Link to comment
Share on other sites

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");

 

  • Like 5
Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×