JUHYUN PARK

@Sahil I used your codes and it's on making hundreds of error logs about rx and ry values. TweenMax.js:6983 Error: <rect> attribute rx: A negative value is not valid. ("-0.004661155234585424") TweenMax.js:6983 Error: <rect> attribute ry: A negative value is not valid. ("-0.007435652398029102") So, I tried to enlarge it's over-wrapping svg and also tried to adjust numbers but nothing worked. (No critical problem and it worked well, but how can I prevent those error messages? Thanks.

Sorry for making issues. Thanks to Sahil, It was the exact effect I was looking for. I've checked the all the bouncing examples, but there wasn't example that inflating from the center (I've done it with using MorphSVG, made another SVG on the right and changed it on the moment.) - That dragged me that would be any other way to make it through library. And I've checked the Sahil's codes, it could be much more CSS effects. If it would be the problem, then I'll delete this article.

I'm on making the bar animation, dropping from top and will be bounced. But during bouncing, I want the bar will be inflated only width from the center, like the image I attached. <rect class="nemo-bar" x="0" y="291.7" width="107" /> Sample RECT And I've done as below, var $nemo_curr = $('.nemo-bar'), tl = new TimelineLite(); tl.to($nemo_curr, 1.5, {height:bar_height,y:bar_space, transformOrigin:"0 100%", ease:Bounce.easeOut}); but the problem is when the transformation being made, also want this Rect will be inflated as the image, naturally. Please help me how can I get this effect.