How to create "Tada" or "flash" animation effect for the text

[Guest LeoSan]

Please check the codepen link and could someone please help me to create "Tada" or "Flash" effect instead of "Shake" effect? Thanks in advance.

See the Pen LVGzMV by MAW (@MAW) on CodePen.

[PointC]

Hi @LeoSan

 

Welcome to the forum.

 

I'm not quite sure what you mean by a 'Tada' or 'Flash' effect. You have many properties available to animate other than x. Do you mean an opacity for a 'Flash' effect and maybe a scale for a 'Tada' effect?  I'd like to help, but I'm not quite sure what you're asking.

 

Just an FYI - for a fun shaking effect you should also take a look at CustomWiggle.

https://greensock.com/wiggle-bounce

 

Happy tweening.

[Guest LeoSan]

Hello,

click on this below link and select "tada" and "flash" effect. It is in pure css but I want to create same effect using GreenSock. So could you show me how to do this. Thank you. 

 https://daneden.github.io/animate.css/

[PointC]

Most of those effects are just using combinations of position, scale, rotation and opacity. Here is a demo of the two you mentioned.

 

See the Pen gWeGgY by PointC (@PointC) on CodePen.

You should be able to fork that demo and start experimenting. If you're just getting started with GSAP, I'd recommend some blog posts:

https://greensock.com/jump-start-js

https://greensock.com/get-started-js

 

Also, take a look at the JumpStart Collection here:

http://codepen.io/collection/ifybJ/

 

Happy tweening.

[Carl]

yup, in addition to PointC's great advice, I think CustomWiggle's "anticipate" type is pretty close to "tada".

See demo here: https://greensock.com/customwiggle (section CustomWiggle Types)