Playground

Text Animation

Simple text animation elements.

+ Tailwind and Alpine
Copied!

Pines UI Library 

<h1 x-data="{
    startingAnimation: { opacity: 0, scale: 4 },
    endingAnimation: { opacity: 1, scale: 1, stagger: 0.07, duration: 1, ease: 'expo.out' },
    addCNDScript: true,
    animateText() {
        $el.classList.remove('invisible');
        gsap.fromTo($el.children, this.startingAnimation, this.endingAnimation);
    },
    splitCharactersIntoSpans(element) {
        text = element.innerHTML;
        modifiedHTML = [];
        for (var i = 0; i < text.length; i++) {
            attributes = '';
            if(text[i].trim()){ attributes = 'class=\'inline-block\''; }
            modifiedHTML.push('<span ' + attributes + '>' + text[i] + '</span>');
        }
        element.innerHTML = modifiedHTML.join('');
    },
    addScriptToHead(url) {
        script = document.createElement('script');
        script.src = url;
        document.head.appendChild(script);
    }
}"
x-init="
    splitCharactersIntoSpans($el);
    if(addCNDScript){
        addScriptToHead('https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js');
    }
    gsapInterval = setInterval(function(){
        if(typeof gsap !== 'undefined'){
            animateText();
            clearInterval(gsapInterval);
        }
    }, 5);
"
class="invisible block text-3xl font-bold custom-font"
>
Pines UI Library
</h1>

Data

Below you will find the data properties available in the x-data attribute of this element.

Property and Description
startingAnimation
An object containing the starting position of each character in the text. Text will be animated from this position to the ending position.
endingAnimation
An object containing the ending position of each character in the text.
addCNDScript
A boolean value, if set to true it will append the GSAP library to the page if it is not already loaded.
animateText()
This method will play the text animation.
splitCharactersIntoSpans(element)
This method will split all the characters into individual spans, allowing each character to be animated individually.
addScriptToHead(url)
This method will append the GSAP library to the head of the page.

Learn more about the startingAnimation and endingAnimation objects by referring to the gsap.fromTo() documentation.

More Examples

Below you will find more Text Animation examples you may wish to use in your projects.

Copied!

Pines UI Library 

<h1 x-data="{
    startingAnimation: { opacity: 0, y: 50, rotation: '25deg' },
    endingAnimation: { opacity: 1, y: 0, rotation: '0deg', stagger: 0.02, duration: 0.7, ease: 'back' },
    addCNDScript: true,
    splitCharactersIntoSpans(element) {
        text = element.innerHTML;
        modifiedHTML = [];
        for (var i = 0; i < text.length; i++) {
            attributes = '';
            if(text[i].trim()){ attributes = 'class=\'inline-block\''; }
            modifiedHTML.push('<span ' + attributes + '>' + text[i] + '</span>');
        }
        element.innerHTML = modifiedHTML.join('');
    },

    addScriptToHead(url) {
        script = document.createElement('script');
        script.src = url;
        document.head.appendChild(script);
    },
    animateText() {
        $el.classList.remove('invisible');
        gsap.fromTo($el.children, this.startingAnimation, this.endingAnimation);
    }
}"
x-init="
    splitCharactersIntoSpans($el);
    if(addCNDScript){
        addScriptToHead('https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js');
    }
    gsapInterval2 = setInterval(function(){
        if(typeof gsap !== 'undefined'){
            animateText();
            clearInterval(gsapInterval2);
        }
    }, 5);
"
class="invisible block pb-0.5 overflow-hidden text-3xl font-bold custom-font"
>
Pines UI Library
</h1>
Copied!

Pines UI Library 

<h1 x-data="{
    startingAnimation: { opacity: 0 },
    endingAnimation: { opacity: 1, stagger: 0.08, duration: 2.7, ease: 'power4.easeOut' },
    addCNDScript: true,
    splitCharactersIntoSpans(element) {
        text = element.innerHTML;
        modifiedHTML = [];
        for (var i = 0; i < text.length; i++) {
            attributes = '';
            if(text[i].trim()){ attributes = 'class=\'inline-block\''; }
            modifiedHTML.push('<span ' + attributes + '>' + text[i] + '</span>');
        }
        element.innerHTML = modifiedHTML.join('');
    },

    addScriptToHead(url) {
        script = document.createElement('script');
        script.src = url;
        document.head.appendChild(script);
    },
    animateText() {
        $el.classList.remove('invisible');
        gsap.fromTo($el.children, this.startingAnimation, this.endingAnimation);
    }
}"
x-init="
    splitCharactersIntoSpans($el);
    if(addCNDScript){
        addScriptToHead('https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js');
    }
    gsapInterval3 = setInterval(function(){
        if(typeof gsap !== 'undefined'){
            animateText();
            clearInterval(gsapInterval3);
        }
    }, 5);
"
class="invisible block pb-0.5 overflow-hidden text-3xl font-bold custom-font"
>
Pines UI Library
</h1>
Tabs Text Input
A project by DevDojo