[Best way to animate huge circle?]

Thanks for your answer but no

 

Actually, I have a specific case which crashes my browser and it didn't really help. I'll try and create a plnkr/codepen version of it!

[Best way to animate huge circle?]

Hello again!

 

What would you think is the best way to animate a huge circle with GSAP?

 

I've tried :

• Changing the width/height of a div with border radius (small to big)
• Changing the scale of a div with border radius (big scaled down to small and then scaled back up)
• Changing the width/height of a svg circle

For example, http://plnkr.co/edit/vgmRe65FmzmzpcpHR7KM in full screen.

But the animation is not really smooth on Firefox.

I was wondering if my only option is to use a canvas element.

 

Any ideas?

Thanks

[Tweening boxShadow with inset = weird behaviour]

Thank you for your answer!

 

But I was mostly wondering why gsap behaved that way.

I set the box shadow in css because I needed an initial value, before even gsap is loaded

[Tweening boxShadow with inset = weird behaviour]

Hello,

 

I was trying to animate an inset boxShadow on an element and I saw something weird.

If the element has an inset boxShadow and I tween to another inset boxShadow, the border goes outside the element.

It works ok if I remove the inset on the Tween command.

 

Example :

 

http://plnkr.co/edit/x7OoyDcVdod2DQjB6HzP?p=preview

 

Is this normal behaviour?

 

Thank you

[Modifying width after scale = not centered]

Oops, forgot to reply.

Thank you for the quick answer!

[Modifying width after scale = not centered]

http://jsfiddle.net/nqdaj3cL/

 

Hello!

 

I have a (maybe simple) problem with transforms and GSAP:

 

I want to scale a centered object and modify its width but as you can see in the fiddle, the object isn't centered after the animation.

It's because the translate(-50%, -50%) isn't honored anymore as GSAP keeps in memory the initial x and y values.

 

But if I remove the matrix in the inspector and modify manually a transform : scale, it centers fine.

 

What can I do in this case?

 

Thank you!