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>GSAP Library
This element makes use of the GSAP plugin. It will automatically be added if addCNDScript is set to true. If GSAP is already loaded on your page, you can set addCNDScript to false and the library will not be added to your page.
Data
Below you will find the data properties available in the x-data attribute of this element.
| Property and Description | 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. |
| 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. |
| 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. |
| 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. |
| 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. |
| 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. |
| 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>
