A Collection of Very Useful Text Animations Using GSAP and SplitText - Tutorial

Tutorial on creating text animations with GSAP, SplitType and custom JavaScript

I thought this might be useful for developers just getting to grips with GSAP. The possibilities for text animation really are endless, but here are 8 useful ones to begin with.

‍

I go over the logic and exactly how to write the JavaScript in the YouTube tutorial, so this post will focus on instructions for how to use the code in your projects.

‍

Include the CDNs

Firstly, you want to make sure you're linking to both the GSAP and SplitType libraries. Here are the CDNs:


<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
<script src="https://unpkg.com/split-type"></script>

‍

Save the HTML elements as variables

To simplify your JavaScript, save all the elements you want to animate as variables, to make their selection in the code simpler. For the headings below, I have already intialised the SplitType object for each of them. For a detailed explanation of this, see the tutorial.


 // Initialize SplitType on the headings
    const heading1 = new SplitType('#characterBounce', { types: 'chars' });
    const heading2 = new SplitType('#fadeInScale', { types: 'words' });
    const heading3 = new SplitType('#letterFlip', { types: 'chars' });
    const heading4 = new SplitType('#elasticStretch', { types: 'chars' });
    const heading5 = new SplitType('#fadeSlide', { types: 'chars' });
    const heading6 = new SplitType('#swirl', { types: 'chars' });
    const heading7 = new SplitType('#threeDflip', { types: 'chars' });
    
    // Button IDS
    const button1 = document.getElementById('characterBounceButton');
    const button2 = document.getElementById('fadeInScaleButton');
    const button3 = document.getElementById('letterFlipButton');
    const button4 = document.getElementById('elasticStretchButton');
    const button5 = document.getElementById('fadeSlideButton');
    const button6 = document.getElementById('swirlButton');
    const button7 = document.getElementById('threeDflipButton');
    const button8 = document.getElementById('typewriterButton');

‍

Animation 1: Character Bounce


function runAnimation1(){
    	gsap.from(heading1.chars, {
      	duration: 0.5, 
        opacity: 0, 
        y: -70, 
        stagger: 0.05,
        ease: "bounce.out",
      })
    }

‍

Animation 2: Word Fade In & Scale


 function runAnimation2() {
    	gsap.from(heading2.words, {
      	duration: 0.8,
        opacity: 0, 
        scale: 0.9, 
        stagger: 0.1, 
        ease: "power2.out",
      })
    }

‍

Animation 3: Letter Flip

‍


function runAnimation3() {
    	gsap.from(heading3.chars, {
      	duration: 0.6, 
        rotateY: -180,
        transformOrigin: "50% 50%",
        stagger: 0.05,
        ease: "back.out",
      })
    }

Animation 4: Elastic Stretch

‍


function runAnimation4(){
    	gsap.from(heading4.chars, {
      	duration: 1.5,
        scaleX: 2,
        scaleY: 0.5, 
        ease: "elastic.out(1, 0.75)",
      })
    }

Animation 5: Fade and Slide

‍


function runAnimation5() {
    	gsap.from(heading5.chars, {
      	duration: 1, 
        x: -100, 
        opacity: 0, 
        stagger: 0.1,
        ease: "power2.out",
      })
    }

Animation 6: Swirl

‍


function runAnimation6() {
      	gsap.from(heading6.chars, {
        	duration: 1.2, 
          scale: 0.5, 
          rotation: 180, 
          opacity: 0, 
          ease: "power4.out",
        })
      }

Animation 7: 3D Flip

‍


function runAnimation7(){
     	gsap.from(heading7.chars, {
      	duration: 1.5, 
        rotationY: 360,
        transformPerspective: 800, 
        transformOrigin: "50% 50%", 
        opacity: 0, 
        ease: "power3.inOut",
      })
     }

Animation 8: Custom Typewriter Effect


      function typewriterEffect(text, typingSpeed = 90){
      	const typewriterText = document.getElementById('typewriter');
        typewriterText.innerHTML = "";
        let i = 0;
        let timer = setInterval(() => {
        	if (i < text.length){
          	typewriterText.innerHTML += text.charAt(i);
            i++;          
          } else {
          	clearInterval(timer)
          }
        }, typingSpeed); 
      }

‍

Call the functions when you want the animations to play


    runAnimation1();
    runAnimation2();
    runAnimation3();
    runAnimation4();
    runAnimation5();
    runAnimation6();
    runAnimation7();
    typewriterEffect("This is text that will be typewritten!", 50);

‍

Here are the selection of button click event listeners


     // Animation 1 Button Click Event Listener
    button1.addEventListener('click', () => {
    	
      heading1.revert();
      heading1.split({ types: 'chars'});
      
      runAnimation1();
    })
    
    // Animation 2 Button Click Event Listener
  button2.addEventListener('click', () => {
    	
      heading2.revert();
      heading2.split({ types: 'words'});
      
      runAnimation2();
    })
    
     // Animation 3 Button Click Event Listener
     button3.addEventListener('click', () => {
      
        heading3.revert();
        heading3.split({ types: 'chars' });

        runAnimation3();
    });
    
     // Animation 4 Button Click Event Listener
     button4.addEventListener('click', () => {

          heading4.revert();
          heading4.split({ types: 'chars' });

          runAnimation4();
      });
      
     // Animation 5 Button Click Event Listener
 			 button5.addEventListener('click', () => {
      
        heading5.revert();
        heading5.split({ types: 'chars' });

        runAnimation5();
    });
    
     // Animation 6 Button Click Event Listener
   	 button6.addEventListener('click', () => {
      
        heading6.revert();
        heading6.split({ types: 'chars' });

        runAnimation6();
    });
    
     // Animation 7 Button Click Event Listener
   		button7.addEventListener('click', () => {
      
        heading7.revert();
        heading7.split({ types: 'chars' });

        runAnimation7();
    });
    
     // Animation 8 Button Click Event Listener
		 button8.addEventListener('click', () => {
     
        typewriterEffect('This is the typewriter effect text, but generated by the button!');
    });

‍

So I hope this was helpful to you, we will be diving deeper into GSAP & JavaScript, so if you're interested please head over to the LIONIZE YouTube channel and like and subscribe.

‍

Get the Cloneable

A Collection of Very Useful Text Animations Using GSAP and SplitText - Tutorial

Tutorial on creating text animations with GSAP, SplitType and custom JavaScript

‍

Include the CDNs

‍

Save the HTML elements as variables

Animation 1: Character Bounce

Animation 2: Word Fade In & Scale

Animation 3: Letter Flip

Animation 4: Elastic Stretch

Animation 5: Fade and Slide

Animation 6: Swirl

Animation 7: 3D Flip

Animation 8: Custom Typewriter Effect

Call the functions when you want the animations to play

Here are the selection of button click event listeners

lionize agency

We build, you grow

navigation

resources

socials

A Collection of Very Useful Text Animations Using GSAP and SplitText - Tutorial

New Site Launch for Unfolding Edits

Adding a copyright date programmatically in Webflow using JavaScript

Light/Dark Mode in Webflow that persists after page navigation. Client-First.

Webflow Custom Code Character Limit: Two Solutions

7 Steps to developing an effective website strategy for your startup

Unleash the Power of Homepage Copy: Tips for Crafting Compelling and Effective Website Content