News

Add animation to text headings with GSAP

Jordi Romkema, managing partner at Superhero Cheesecake, reveals how to recreate the animation technique behind wiggly quiz-time headings found on the Project Schoolkrant website

wigglytext

Jordi Romkema, managing partner at Superhero Cheesecake, reveals how to recreate the animation technique behind wiggly quiz-time headings found on the Project Schoolkrant website

wigglytext
GET THE TUTORIAL CODE


Download and attach GSAP

For this technique we’ll show how you can re-create the ‘wiggly’ text headings found within Project Schoolkrant whenever a quiz begins. To get started, download the latest version of GSAP (1.18.0 or higher) from greensock.com/gsap. Unzip the minified JS file and place within your chosen project path. Start with a clean HTML document in the site root and reference the JS file inside the <head> tag or link to the CDN instead as shown:

001 <html>    
002 <head>    
003 <!-- Download GSAP link to page as     follows -->    
004 <script src="js/vendor/TweenMax.    min.js"></script>    
005 <!-- Or via the latest CDN link as follows -->    
006 <script src="https://cdnjs.    cloudflare.com/ajax/libs/gsap/1.18.0/    TweenMax.min.js"></script>    
007 </head>    
008 </body></body>    
009 </html>    

Add your heading text

So in the very simplest terms, our page needs a heading to animate. To create an example heading, you need to add a <h1> tag to the <body> tag in your HTML document. You can of course use <h2> to <h6> headings as desired just as long as you specify a class name, such as ‘title’, so that we can reference it within our JavaScript and also apply additional CSS styling within the <head> tag.

001 <body>    
002 <h1 class="title">Quiztime!</h1>    
003 </body>    

Create a script tag

Before you can create the wiggle function for the heading, you need to create a <script> tag for our JavaScript and add it to the bottom of the <body> tag in your HTML document. Create a variable within the <script> tag called ‘chars’. This variable will store all the references to the individual characters found within the text of your heading.

001 <script>    
002 var chars = [];    
003 </script>    

Split up the characters

Next we need to write a function within the <script> tag named ‘textSplit’. This starts by finding our heading element based on the class name before reading the text contents of the heading. It then iterates over all its text characters and splits them into the ‘chars’ variable. By also replacing the contents of the heading with a separate <span> tag per character, we can give each individual text character its own animation effect:

001 function textSplit() {    
002 var title = document.        querySelector('.title');    
003 var splitText = title.textContent.    split('');    
004 title.textContent = '';    
005 var character;    
006 for(var i=0, len=splitText.length;     i<len; i++) {    
007 character = document.createElement('span');    
008 character.textContent =         splitText[i];    
009 character.style.display = 'inline-    block';    
010 chars.push(character);    
011 title.appendChild(character);
012 }    
013 }    

Create the wiggle effect

Next we need another function within the <script> tag. Name this one ‘textWiggle’. Add a GSAP Timeline to this function that will repeat itself when done, and for it to go back and forth. Within the textWiggle function, create a loop to create multiple random positions for each character within the heading. Now use the new cycle property within GSAP so that each character will get a different random position and thus a different animation:

001 function textWiggle() {    
002 var timelineWiggle = new  TimelineMax({repeat:-1, yoyo:true});    
003 for(var j=0; j < 10; j++) {    
004 timelineWiggle.staggerTo(chars,     0.1, {    
005 cycle: {    
006 x: function() { return Math.    random()*4 – 2; },    
007 y: function() { return Math.    random()*4 – 2; },    
008 rotation: function() { return Math.    random()*10 – 5; }    
009 },    
010 ease: Linear.easeNone    
011 }, 0);    
012 }    
013 }    

Trigger the wiggling

All that is left to do within our code is to finally call the textSplit and textWiggle functions at the very end of the <script> tag to initiate the effect. Simply save your page and test in your browser to preview. You can then use this technique in various ways, so try changing the various parameters or come up with new animations to suit your own projects.

001 textSplit();    
002 textWiggle();    
003 </script>
×