Jump to content
GreenSock

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

Jerky borderRadius tweens

Recommended Posts

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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!

  • Like 1
Link to comment
Share on other sites

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.

  • Like 1
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.
×