Author: | Raf-sns |
---|---|
Views Total: | 69 views |
Official Page: | Go to website |
Last Update: | November 11, 2023 |
License: | MIT |
Preview:

Description:
animate_letters.js is a lightweight and configurable text animation library for animating individual letters within a text block.
It helps you create natural, high-performance text animations by adding and removing CSS classes to individual letters wrapper in a <span>
tag over time.
Great for attention-grabbing headlines, dynamic presentations, interactive storytelling, promotional content, and much more.
How to use it:
1. Download and import the animate_letters.js into the HTML document.
<script src="/path/to/animate_letters.min.js" defer></script>
2. Initialize the animate_letters.
<p class="text_to_animate"> Hello World ! </p>
var letters = animate_letters('.text_to_animate', { // hide element before run animation hide_element_before : false, // add class(es) list 'class_1 class_2' or '' prepare : 'letters_in_top', // classes to add by phases // set : [] | ['class_a'] | ['class_a','class_b'] add : [ // phase 1 [], // phase 2 ['rotate_letters'], // phase 3 ['space_letters','color_letters'], // phase 4 [] ], // classes to remove by phases arrays of classes // set : [] | ['class_a'] | ['class_a','class_b'] remove : [ // phase 1 ['letters_in_top'], // phase 2 [], // phase 3 [], // phase 4 ['space_letters','color_letters'] ], // timers by phases -> array of objects // set : { delay : [integer in milliseconds], // increment_delay : [integer in milliseconds] } timers : [ { delay : 0, increment_delay : 60 }, // phase 1 { delay : 100, increment_delay : 40 }, // phase 2 { delay : 80, increment_delay : 30 }, // phase 3 { delay : 0, increment_delay : 20 } // phase 4 ], // remove spans who wrapped letters at the end of last phase // set : true / false clean_after : true, // function to launch at the end of the last phase // set : your_function() or null end_callBack : function(){ // sibling text container var container_text = document.querySelector('.text_to_animate'); // add a class container_text.classList.add('callback_anim'); // remove after n seconds var Timer = setTimeout(()=>{ container_text.classList.remove('callback_anim'); clearTimeout( Timer ); }, 800 ); } });
3. Apply your own CSS animations to the letters.
.text_to_animate { margin: 0; padding: 0; font-size: 3.5em; line-height: 1.5em; letter-spacing: 4px; text-align: center; color: #9fc95f; transition: transform 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55); } .text_to_animate span { display: inline-block; z-index: 100; position: relative; top: 0; opacity: 1; letter-spacing: 4px; transform: rotateY(0deg); transition: top 1s cubic-bezier(0.64, -0.16, 0.15, 1.64), opacity 1s linear, letter-spacing 0.6s linear, transform 1s ease; } .text_to_animate span.letters_in_top { top: -100vh; opacity: 0; } .text_to_animate span.rotate_letters { transform: rotateY(1080deg); transition: transform 2s ease-in-out, letter-spacing 1s linear; } .text_to_animate span.space_letters { letter-spacing: 12px; transition: letter-spacing 1s linear, transform 2s ease-in-out; } .text_to_animate span.color_letters { color: #bdd656; text-shadow: 0 0 30px #cbe852; } .callback_anim { transform: rotateZ(-10deg) scale(1.2); transition: transform 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55); }
4. Run the text animation.
letters.run();
Changelog:
11/11/2023
- v2.0.0