Speech buble or callout animation

[mk1]

Hey, 

 

quick question, have you any working examples on speech buble animations?

 

I want to make one, to animate speech buble size from small to big, like in some popular messenger applications or simillar. Any tips much appreciated.

 

And how to animate width and height from the bottom middle in example? Transform origin is for css transforms as I recall

 

If animating from the middle is impossible I thought about animating width from the left top corner as a backup solution, but still transform origin is not of much use for here,....

 

 

Thanks!

 

 

Here's one simple example I have encountered: 

See the Pen qFDBK by anshing97 (@anshing97) on CodePen

See the Pen vgxPgg by Nikolaus91 (@Nikolaus91) on CodePen

[PointC]

Hi mk1 

 

Is there a particular problem you're having with your speech bubble animation or are you just looking for inspirational examples? I looked at your pen a couple times, but it's a bit different each time I look so I assume you're still working on it.

 

I'd recommend a search on CodePen for speech bubble:

 

See the Pen by search (@search) on CodePen

 

Of course those won't all be GSAP animations, but it should give you some inspiration.

 

Regarding your question about transformOrigin - center bottom should work just fine. I like to use xPercent and yPercent to center things rather than use all those vendor prefixes for the transforms. Something like this:

TweenMax.set(yourElement, {xPercent:-50, yPercent:-50, left:"50%", top:"50%", transformOrigin: "center bottom"})

To give the speech bubble some character you may want to look into the new CustomEase and maybe even a CustomBounce with a tiny bit of squash and stretch for a fun organic feel. If you haven't played with those yet, please take a look:

 

https://greensock.com/customease

https://greensock.com/wiggle-bounce 

 

If you have a specific question, we'd be happy to assist.

 

Happy tweening.

[mk1]

For now I am looking for an inpiration but the goal I want achive is something like this:

http://imgur.com/a/OdQpM

 

Thanks for links to custom Wiggle and Ease, but for now I am strugling with morphing the buble from the middle. I am not able to achive this while animating width or height, only scaling manage to do this, but it's not the effect I want to use ...

[mk1]

I went through codepen's regarding the speech buble effect but none of them is what I am looking for or even close. Mostly shapes are provided there and shape is not what I need, I focus only on blowing ballon like effect here.

[PointC]

You mentioned morphing. Are you trying to morph this shape from something else? ...or will it just be a width/height animation?

 

So, your basic starting problem is the anchor point from which it animates?

[mk1]

First step: is just animating width, height. If this work out well than I will try to add a morping to it, but it still under consideration. Now I am trying to findout any limitations that can hold us during the development part.

[PointC]

If you're going to be morphing, I assume you're making this an SVG? That would be my personal recommendation anyway. 

 

The demos you're posting are all divs with a pseudo element for the little triangle part of the bubble so I'm not quite sure what you're doing and how to advise you. 

 

I looked at the link you posted, but it's just a static shape and I'm not sure what the question might be. Are you having trouble creating that shape or just can't animate it from the correct point? Animating the size will be different for SVGs and you would have the additional benefit of svgOrigin too.

 

If you could give more specifics, we can probably give you better advice.

 

Thanks.

[OSUblake]

I'm kind of confused by this too. Is this HTML or SVG? And what was wrong with scaling the element? Width and height have no transform origin. Transform origin is for transforms like scale and rotation. To animate width and height from the center, you have to keep your element centered inside it's parent element using a technique like PointC showed or with flexbox.

See the Pen 0c5065bf73f7afe8108875a7f9572926 by osublake (@osublake) on CodePen

 

Alternatively, you can translate it back half the difference.

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

 

Overall, animating height and width from the center might not look smooth, and there's not a lot GSAP can do about that. It's how the browser rounds height and width.

[mk1]

Okay, I can see I have to be more specific. 

 

The whole thing with the speech buble animation is an experiment I want to try it out and see if this is possible.

 

The image I provided is just an image to show what I want to achieve - the beginning and the and of the animation.

My goal is described below:

I would love if the animation could move from the bottom and grow from a smaller speech bubble. I would like it to look lively and bouncy rather than just growing motion.

 

PointC, I was wondering if using an SVG wouldn't be a better approach here, do you think it will be a better solution here? For now all I have is HTML + CSS markup.

 

OSUblake, thanks for the tips, you are right animating wdth/height from the middle doesn't have the smoothness I need.

 

Currently working on SVG approach, updates soon Do you have any SVG showcases on mind that work in similar way?

[mk1]

So... after some thought I have made it with an SVG shape and it works very very well: 

See the Pen PWjYMz by Nikolaus91 (@Nikolaus91) on CodePen

 

Thanks again for the tips!

 

One question though, can I manipulate the speed of Ease steps? I want the first part , when the buble is getting bigger to animate slower and the part when it getting smalle to speedup a little bit. Can I do that?

[PointC]

You should be able to make most any type of ease you want with the new CustomEase.

 

https://greensock.com/customease

 

Happy tweening.