Share Posted March 23, 2018 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 More sharing options...
Share Posted March 23, 2018 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 7 Link to comment Share on other sites More sharing options...
Share Posted March 23, 2018 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. 8 Link to comment Share on other sites More sharing options...
Share Posted March 23, 2018 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. 1 Link to comment Share on other sites More sharing options...
Share Posted March 23, 2018 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. 2 Link to comment Share on other sites More sharing options...
Author Share Posted March 24, 2018 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 More sharing options...
Share Posted March 24, 2018 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. 2 Link to comment Share on other sites More sharing options...
Share Posted March 28, 2018 Hi, Which plugin should I use for BendyBox? Thanks! Link to comment Share on other sites More sharing options...
Share Posted March 28, 2018 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. 5 Link to comment Share on other sites More sharing options...
Share Posted March 29, 2018 @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. 4 Link to comment Share on other sites More sharing options...
Author Share Posted April 9, 2018 @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. Link to comment Share on other sites More sharing options...
Share Posted April 14, 2018 I think @GreenSock will have to add some logic to avoid applying negative values to rx and ry. Link to comment Share on other sites More sharing options...
Share Posted April 14, 2018 Or use the ModifiersPlugin... See the Pen EEBZvg by osublake (@osublake) on CodePen 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now