Jump to content
Search Community

Way to inflating SVG Rect

Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts


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. 



Link to comment
Share on other sites

Nice job @Sahil


A while back I was toying with the idea of releasing a tool that'd make this sort of thing easier but I put it on the backburner for a while. I called it "BendyBox" - it basically lets you convert any DIV or RECT into an object thats bendable in various ways. It swaps in an SVG to create those effects and you can register various animation effects that you easily call later, like "drop", "spin", etc. 


Advanced demo: 

Basic (with quasi-documentation in comments): 


Again, not sure if we'll make it an official GreenSock tool yet, but I figured this is a good place to share about it. Feedback is welcome. 

  • Like 8
Link to comment
Share on other sites

I have mixed feelings about it, it seems more like effects library like animate.css. But it might attract different group of users. I would love it if all animations behaved like drop effect where content moves along the effect. Would it work as responsive effect? People will expect it to be so for sure, if it's not going to be high maintenance then it seems like great addition to GSAP.

  • Like 1
Link to comment
Share on other sites

It wouldn't be horribly difficult to make the content animate too (like drop does), but I'm a little concerned that this could turn into a beast because of all the customizations folks might want. "Can I make it drop more? Can it wiggle too? Can we apply custom physics?..."


Then again, it seems like at least a nifty utility for creating these types of effects. I think a lot of people may struggle with getting the bendiness on their own, but they wouldn't find it horribly difficult to add the other (more standard) animated effects. 

  • Like 2
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

You don't have to delete the post.


Ya you can do it with CSS but it is going to be time consuming to get it right and make changes. With custom bounce plugin your bounce effect is in sync with squish effect out of box. You will save a lot of time and be  able to make changes by changing couple of numbers.


I think this post reminded @GreenSock of something he had been working on so he posted, it certainly doesn't have effect you are after but if this library gets released he probably will add bounce effect to it.

  • Like 2
Link to comment
Share on other sites

@GreenSock Jack..


I would love to see Bendy Box get some more love, and put on the front griddle. I think it would bring other people into using GSAP, and then they can always move into more advanced custom stuff that you can do with GSAP. Kind of like letting them get their feet wet before they jump into the deep end.


But that's just my two bits. :)

  • Like 4
Link to comment
Share on other sites

  • 2 weeks later...



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? 



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.
  • Create New...