Jerky borderRadius tweens

[darn]

I'm a GSAP newbie, an animator not a programmer. I had to hack my code to make some borderRadius tweens run smoothly.  Trying to animate horizontal and vertical components of border radius of the four corners separately. The codepen explains it better than I can here. I'm hoping someone can point me toward a better solution. Thanks in advance.

See the Pen LNrqgL by darn (@darn) on CodePen

[Carl]

Hi and welcome to the GreenSock forums,

 

Thanks for the demo, is there anyway you can simplify it.

Very difficult to read through a timeline that is 100 lines long or keep up with a 50-second animation.

 

That aside, I'm not really sure the syntax with 2 values is accurate, perhaps it is a mistake on your end or I'm not up with the latest stuff

//not sure why you are using 0px 20px or what it is supposed to do on a single corner
.to(".box", 1, {borderBottomLeftRadius:"0px 20px", ease: Power2.easeIn, delay:0.5})

//pretty sure you just should have one value
.to(".box", 1, {borderBottomLeftRadius:"50px", ease: Power2.easeIn, delay:0.5})

please see:

http://codepen.io/GreenSock/pen/pyZydB

[Carl]

edit: ok just learned about the vertical and horizontal component of each corner. my bad.

 

not exactly sure why the jump is happening. will have to look into it a little closer.

[Dipscom]

I have had a play with this and noticed it only misbehaves if you end the tween matching the two values, say: "40px 40px" - It appears to me that GSAP combines them into a single value at the end of the Tween so your CSS rule ends up being:

border-bottom:-left-radius: 40px;

When you, then, try and tell it to tween again to another value, say: "20px 40px" it jumps from the previous single value to a double value.

border-bottom:-left-radius: 40px;

to

border-bottom:-left-radius: 20px 40px;

I don't think this is expected behaviour. But until Jack says something, my advice to you is to either animate a single value or, if you need the curve to be slightly angled, to never end the tween with both values being the same.

 

See bellow:

See the Pen jqprer?editors=0010 by dipscom (@dipscom) on CodePen

[GreenSock]

I'll add support for 2-part borderBottomLeftRadius, borderBottomRightRadius, borderTopLeftRadius, and borderTopRightRadius values in the upcoming 1.18.4 release which you can preview (uncompressed) at https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax-latest-beta.js. Better? 

[darn]

Dipscom thank you.  I didn't notice that it only happened after I had set both values to be the same. I can easily keep the two values slightly different.  Thank you.

[Carl]

Darn,

 

please use the version of TweenMax Jack provided above and give it a test. Look at this fork of your demo with the 1.18.4 preview:

http://codepen.io/GreenSock/pen/eZLzez

 

does that work for you?

[blancy]

Wow - just in time development

 

I need this 2 value functionality for a project ending imminently!  Is there a scheduled release date for 1.18.4?

 

 

This is my first project using Greensock and I must say i've really enjoyed learning how to use it.

 

 

edited:  In fact I've just had a play with non-matching end values (using 1.18.0) and it works great, and a bonus is that the effect is closer to what I was after anyway.  Nice work guys.

[GreenSock]

GSAP 1.18.4 is officially released, so feel free to update your files/links. The only caveat is that the NPM registry seems to be having difficulty updating (though I published this morning) and still shows 1.18.3 but I reached out to their support team and hopefully will hear back. But our zip downloads, Github repo, and the CDN links are all updated to 1.18.4 now. Enjoy!

[darn]

Sorry it has taken so long to get back here.  My wife has been in the hospital the last few days - not enough time in the day lately.

Yes, 1.18.4  Seems to work perfectly for me.  Thank you.