Give awesome wave effect to your texts with jquery animation and tweenmax

Today I’m gonna show you how to give an awesome wavy effect to your html texts VERY EASILY. Yes it’s damn simple if you use a simple plugin called tweenmax. Just a few lines of code and that is it. I’ve shared the online live demo preview link and the download project link at the end of this post. You can view or download the project from there.

You also can see how to draw wave with jQuery and html5 canvas, without any plugin.


text-wave-effect-file-listFirst of all I would like to explain the functionality of each file so that it become easy for you to understand the whole project and you can implement this in your project easily. As you can see in the screenshot, I’ve used two javascript library files, one is the normal jquery library, and the second one is the tweenmax library. In the file style.css I’ve put the normal css code, in the index.html the html code including the text where we’re gonna put our effect is written, and the main.js file contains the main functions and code to make this animation.

Code and Explanation

index.html file:

<!-- code by -->

				<link href="style.css" rel="stylesheet" /><script type="text/javascript" src="library/jquery.min.js"></script><script type="text/javascript" src="library/tweenmax.min.js"></script>
<div id="textDiv">Void Canvas, the web and app developers' community.</div>

As you can see, here we’ve just linked the style.css, main.js, jquery library and the tweenmax. Just normal linking and calling the external files. The textDiv is containing the text which is gonna be animated with the wave effect.

The style.css file:

/* code by */
body {
  font-family: Arial, Helvetica, sans-serif;
	margin: 10px;
	color: #fff;

  margin: 100px 30px;

#textDiv span{

This is just simple css file to change the color of the background and text, change the font and it’s size, position the textDiv. But the important thing is, you must set the visibility of the span under textDiv to hidden. (line nimber 17).

The main.js file:

$(document).ready(function() {

	// code by
	var textDiv = $("#textDiv");
	var sentence = textDiv.html().split("");
	var vcTimeline = new TimelineMax({
		repeat : 1,
		repeatDelay : 0.4,
		yoyo : true


	$.each(sentence, function(index, val) {
		if (val == " ") {
			val = " ";
		var letter = $("", {
			id : "txt" + index
		}).html(val).appendTo(textDiv);, 1, {
			rotationY : 360,
			rotationX : 360,
			textShadow : "0px 0px 0px white",
			color : "none",
			autoAlpha : 1,
			ease : Back.easeOut,
			transformOrigin : "50% 50% -20"
		}, index * 0.05);


This file is the main file and the document.ready function is also here. So after running the program, 1st thing what happens is the variable named textDiv takes the instance of the html div whose id is textDiv. The variable named sentence stored the text provided in the index.html file in character array format (that’s why we’re using the split function there). Now vcTimeline is an important object. we’re giving some values to it while initializing. Let me explain the significance of all these data.

  1. repeat: It means how many times the animation should repeat. If you set it to 0, then it will show the text with the animation. If 1, it will 1st show the text and then will hide also. If 3, then show hide and show, like that.
  2. repeatDelay: I think you can understand it’s functionality just by the name. It’s just the time delay after each animation in seconds.
  3. yoyo: If set to false it won’t show the reverse going effect.

So after that, a loop runs (line no#14), for each and every character in the variable called sentence and for each iteration it runs a function with the index and value of the current character as parameters. Then it generates a span tag for each character and give them an animation effect.  Lets explain the the data provided in the function named ‘to’.

  1. rotationY: It means the angle of rotation with respect to the Y axis. If you set it to 180 it will make the characters top down.
  2. rotationX:  It means the angle of rotation with respect to the Y axis. If you set it to 180 it will become mirror image.
  3. textShadow: It’s normal CSS property. Just to give a shadow effect.
  4. color: It’s the color of the text. If set to ‘none’, it will display the default color.
  5. autoAlpha: This effect is to keep the previous characters. If it’s ‘0’ then the previous characters will be hidden. Just try it with it’s two values, ‘1’ and ‘0’ and you will understand the difference.
  6. ease: It’s normal easing effect.
  7. transformOrigin: This is an important one. It actually has three parameters inside it. These 3 parameters modifies the animation. It’s just like modifying the animation with respect to three axis. Just modify the values and you will understand the difference.

And finally the index*0.05 thing is to fix the position of the characters. Each time the loop runs, the index is auto increased by 1.

So that’s all from my side. For any query please post comments, I will try to reply as soon as possible. And don’t forget to download the demo project. Have a nice time 🙂

live-demo-button download-button

Still having issues?

If you still have issues understanding the above article, please leave a comment below and we will try to address that. In case you need help in your projects or understanding anything related to Programming; contact me, Paul Shan for assistance. Thank you for being a reader of VoidCanvas.

About This Author

Hello! I am Paul Shan, a JavaScript Expert, Full Stack and DevOps Engineer cum Consultant based out of Bengaluru, India.

  • venkatesh

    Good one dude!!

  • Michael

    Paul this is an awesome script thank you. I have 2 questions – FIrst how can I adjust the time the animation takes or is it fixed? and is there is any way to get rid of the typewriter effect that starts the animation I was just looking to have text in a heading wave then stop then start up again. This is super simple to make in a flash banner but I really want to learn how to code it this way.



    • metalshan

      Hi Mitchael, It’s very easy to control the duration of the animation. All tweenmax animations have some default time duration. You can double, triple, or cut the speed to half. For that, initialize a variable with your tween and call the timeScale() function.

      var, 1, {
      rotationY : 360,
      rotationX : 360,
      textShadow : “0px 0px 0px white”,
      color : “none”,
      autoAlpha : 1,
      ease : Back.easeOut,
      transformOrigin : “50% 50% -20”
      }, index * 0.05);

      // to double the speed

      And about the typewriter effect: This is why we are using the tweenmax plugin. Don’t know exactly whether it provides any function to change the styling. Need to google it.

  • Manish Kumar

    Hi All

    I need your help.

    can you provide the code for jquery.min.js, tweenmax.min.js and main.js
    If possible please mail me the files on my mail ID :
    Thanks & Regards
    Manish Kumar