Jump to content


Panel bubble effect

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 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?

Link to comment
Share on other sites

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});


  • Like 2
Link to comment
Share on other sites

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!

  • Like 3
Link to comment
Share on other sites

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!

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.