Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Guest LeoSan

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

Recommended Posts

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

Link to comment
Share on other sites

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.

:)

  • Like 1
Link to comment
Share on other sites

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/

Link to comment
Share on other sites

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.

:)

  • Like 2
Link to comment
Share on other sites

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)

  • Like 1
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.
×