Not Tweening BorderRadius

[ajhalls]

I think you guys will like this one, I put together a codepen that lets you dynamically add effects to a box from an object library. It supports simple tweens with a single command, or complex tweens with multiple transitions. I originally had the effects appending to the timeline (

See the Pen JdWzML by ajhalls (@ajhalls) on CodePen

), but during the rework to support complex / multistep tweens they get added in a way that you can combine multiple effects to get some cool transitions.

 

You can help me build up a library of effects by commenting on this thread with an object / array to add to the list.

 

That being said, you can see when you add the "bulge" effect it starts off OK, then on the last part it doesn't tween the border radius, it just replaces it and they "snap" into place. I have only been playing with GSAP for a week or so so still figuring out the finer points

  "bulge":  [
    {
        "duration": ".6",
        "scaleX":"1.5",
        "scaleY":"0.8",
        "borderRadius":"20% 20% 20% 20%"
    },
    {
        "duration": ".6",
        "scaleX":"0.7",
        "borderRadius":"30% 30% 30% 30%"
    },
    {
        "duration": "2.6",
        "scaleX":"1",
        "borderRadius":"0px 0px 0px 0px"
    }
  ]

See the Pen QbvRbQ by ajhalls (@ajhalls) on CodePen

[Carl]

Wow, great work!

Very cool tool. Love all the thought that went into it.

 

The problem seems to stem from the fact that you are mixing units tweening from percents to pixels. 

If you keep everything as percents you should be fine

 

  "bulge":  [
    {
        "duration": ".6",
        "scaleX":"1.5",
        "scaleY":"0.8",
        "borderRadius":"20% 20% 20% 20%"
    },
    {
        "duration": ".6",
        "scaleX":"0.7",
        "borderRadius":"30% 30% 30% 30%"
    },
    {
        "duration": "2.6",
        "scaleX":"1",
        "borderRadius":"0% 0% 0% 0%"
    }
  ]

Does that work for you?

[ajhalls]

Thanks for that tip, it is working in IE / Chrome, but not Firefox, not sure why but I imagine it is an unsupported css option for Firefox and will look into it more.

[Carl]

hmmm. Very strange. I looked in FireFox and inspected the element. As I scrubbed through the timeline I could clearly see the element getting the border-radius inline style applied just fine.

 

I then removed the scale properties from bulge and there was no snapping of the corners.

 

http://codepen.io/anon/pen/BNRgZb

 

My thoughts are this is a rendering issue in FireFox caused by changing border-radius and transform values.

Not sure what a solution might be.

[ajhalls]

I updated the two Codepen links to include 83 tweens that can either be added in sequence, or added simultaneously. They were remastered from Animate.css though you will probably want to play with the timing of the keyframes at times. By using scale3d I got around the issue.