Way to inflating SVG Rect

[JUHYUN PARK 0 Likes (Newbie)]

 

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. 

 

[Sahil 2,541 Likes (Superhero)]

You can do that by using CustomBounce and CustomEase.

 

See the Pen XEgQGE?editors=1010 by Sahil89 (@Sahil89) on CodePen

 

Check docs and following video on how you can do it,

 

https://greensock.com/docs/Easing/CustomBounce

 

 

[GreenSock 8,117 Likes (Superhero)]

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: 

See the Pen 0b4d2b9704dfdcff9094ffed618a0a47?editors=1010 by GreenSock (@GreenSock) on CodePen

Basic (with quasi-documentation in comments): 

See the Pen f2d97e3e620442b8708645868cb759d6?editors=0010 by GreenSock (@GreenSock) on CodePen

 

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. 

[Sahil 2,541 Likes (Superhero)]

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.

[GreenSock 8,117 Likes (Superhero)]

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. 

[JUHYUN PARK 0 Likes (Newbie)]

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.

[Sahil 2,541 Likes (Superhero)]

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.

[Catalin R. 14 Likes (Newbie)]

Hi,

Which plugin should I use for BendyBox?

Thanks!

[PointC 8,599 Likes (Superhero)]

Bendy Box isn't an official GreenSock tool yet. I'm not sure if @GreenSock will release it or not as there are other higher priorities right now. 

 

You can accomplish some of the same things with the MorphSVG plugin though.

 

Happy tweening.

 

[Catalin R. 14 Likes (Newbie)]

Thanks!

[Jonathan 5,176 Likes (Superhero)]

@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.

[JUHYUN PARK 0 Likes (Newbie)]

@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. 

[Sahil 2,541 Likes (Superhero)]

I think @GreenSock will have to add some logic to avoid applying negative values to rx and ry.

[OSUblake 9,990 Likes (Superhero)]

Or use the ModifiersPlugin...

 

See the Pen EEBZvg by osublake (@osublake) on CodePen