Jump to content
Search Community

Panel bubble effect

jknott test
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 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

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