Jump to content
Search Community

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

Guest LeoSan
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

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

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

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

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