Panel bubble effect

[jknott 10 Likes (Newbie)]

I saw this animation today and thought it was cool: https://uimovement.com/ui/3462/time-tracker/?utm_source=newsletter&utm_medium=email&utm_campaign=top_5_ui_designs_this_week&utm_term=2017-04-07

 

I know how to do every animation, except the red panel with the timer bubbling out like it does. 

Are there any examples of this I could look at to see how it's done in GSAP?

[GreenSock 8,117 Likes (Superhero)]

Yeah, that's pretty cool. 

 

The "bubbling out" effect would probably be simplest to do with MorphSVGPlugin. Ultimately it comes down to using an SVG whose bezier control points animate out and back in. You could manually tween each one, but I think it'd be a lot simpler to just do a before/after state and morph between them real quick. Does that make sense? 

 

Kinda like:

TweenMax.to("#box", {morphSVG:"#bowedBox", repeat:1, yoyo:true});

http://greensock.com/morphSVG

[jknott 10 Likes (Newbie)]

Good to know!

I think I came fairly close: 

See the Pen vxqyMZ by jgknott (@jgknott) on CodePen

 

Added a bit more elastic.

 

Thanks for pointing me in the right direction Jack!

[GreenSock 8,117 Likes (Superhero)]

For fun, here's another way you could do it: 

http://codepen.io/GreenSock/pen/4cd31d31ccd72d543ca7bfc0492b9428/?editors=0010

 

[jknott 10 Likes (Newbie)]

Ah I like your way better.  Clean and you don't have to deal with the bounding box on the SVG.  Thanks for sharing that!