{"id":981,"date":"2025-09-08T19:02:43","date_gmt":"2025-09-08T19:02:43","guid":{"rendered":"https:\/\/laywow.com\/animation\/letter-by-letter-text-reveal\/"},"modified":"2025-09-17T15:10:10","modified_gmt":"2025-09-17T15:10:10","slug":"letter-by-letter-text-reveal","status":"publish","type":"post","link":"https:\/\/laywow.com\/en\/animations\/letter-by-letter-text-reveal\/","title":{"rendered":"Letter-by-Letter Text Reveal"},"content":{"rendered":"\n

The letter reveal<\/strong> effect gives your headings a modern and eye-catching look: each letter appears one after another on scroll, just like in the animated intros of creative websites.<\/p>\n\n

<\/p>\n\n

1. Add the Code in Elementor<\/h2>\n\n
    \n
  1. Go to Templates \u2192 Custom Code<\/strong>.<\/li>\n\n\n\n
  2. Click on Add New Code.<\/li>\n\n\n\n
  3. Paste the following code and place it in <\/body> \u2013 End<\/strong><\/strong><\/strong> \"\" :<\/li>\n<\/ol>\n\n
    <script src=\"https:\/\/unpkg.com\/split-type\"><\/script>\n\n<style>\n\/* Emp\u00eache les sauts verticaux lors des masques *\/\n.textLetterReveal .elementor-heading-title .line {\n  overflow: hidden;\n}\n\n\/* Chaque lettre est anim\u00e9e individuellement *\/\n.textLetterReveal .elementor-heading-title .char {\n  display: inline-block;\n  will-change: transform, opacity;\n}\n\n\/* Animation quand .fadeIn est ajout\u00e9 *\/\n.textLetterReveal.fadeIn .elementor-heading-title .char {\n  transform: translateY(100%);\n  opacity: 0;\n  animation: tlr-goUp 0.9s cubic-bezier(0, 0, 0.24, 1.02) forwards;\n  transform-origin: 0 100%;\n}\n\n\/* Animation verticale *\/\n@keyframes tlr-goUp {\n  0%   { transform: translateY(100%); opacity: 0; }\n  20%  { opacity: 0; }\n  30%  { opacity: 0.4; }\n  100% { transform: translateY(0); opacity: 1; }\n}\n\n\/* Variante avec rotation (si tu veux tester) *\/\n@keyframes tlr-goUpTwist {\n  0%   { transform: translateY(100%) rotate(8deg); opacity: 0.2; }\n  20%  { opacity: 0; }\n  30%  { opacity: 1; }\n  100% { transform: translateY(0) rotate(0); opacity: 1; }\n}\n<\/style>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', function () {\n  var speedOfCharAnimation = 0.02; \/\/ vitesse entre lettres (0.02 = 40ms)\n\n  var containers = document.querySelectorAll('.textLetterReveal');\n\n  var io = ('IntersectionObserver' in window) ? new IntersectionObserver(function(entries){\n    entries.forEach(function(entry){\n      if (entry.isIntersecting) {\n        entry.target.classList.add('fadeIn');\n        io.unobserve(entry.target); \/\/ joue une seule fois\n      }\n    });\n  }, { threshold: 0.2 }) : null;\n\n  containers.forEach(function(container){\n    var heading = container.querySelector('.elementor-heading-title');\n    if (!heading) return;\n\n    var splitter = new SplitType(heading, { types: 'lines, chars' });\n\n    function applyCharDelays() {\n      var chars = heading.querySelectorAll('.char');\n      chars.forEach(function(char, i){\n        char.style.animationDelay = (i * speedOfCharAnimation) + 's';\n      });\n    }\n    applyCharDelays();\n\n    var lastW = window.innerWidth;\n    window.addEventListener('resize', function(){\n      if (window.innerWidth !== lastW) {\n        splitter.revert();\n        splitter = new SplitType(heading, { types: 'lines, chars' });\n        applyCharDelays();\n        lastW = window.innerWidth;\n      }\n    });\n\n    if (io) {\n      io.observe(container);\n    } else {\n      container.classList.add('fadeIn');\n    }\n  });\n});\n<\/script>\n<\/code><\/pre>\n\n
    <\/p>\n\n
    Prepare your Heading in Elementor<\/h2>\n\n
      \n
    1. Add a Heading widget<\/strong>.<\/li>\n\n\n\n
    2. Go to Advanced \u2192 CSS Classes<\/strong> and add:  textLetterReveal<\/code><\/li>\n\n\n\n
    3. Add a simple entrance animation<\/strong> (e.g., Fade In<\/em>) in Elementor.\ud83d\udc49 This prevents the display bug on appearance (letters visible before animation).<\/li>\n<\/ol>\n\n
      \"\"<\/figure>\n\n
      Expected Result<\/h2>\n\n
        \n
      • On load or when the heading enters the viewport:\u2192 each letter appears one after another<\/strong> with a smooth effect.<\/li>\n\n\n\n
      • The animation plays only once<\/strong> (but you can replay it by removing io.unobserve(entry.target)<\/code> from the code).<\/li>\n<\/ul>\n\n
        <\/p>\n\n
        Customization<\/h2>\n\n
        You can adjust:<\/p>\n\n
        Speed between letters<\/strong>: var speedOfCharAnimation = 0.02;<\/code> \u2192 set 0.05<\/code> to slow down, or 0.01<\/code> to speed up.<\/p>\n\n
        Animation type<\/strong>: Replace tlr-goUp<\/code> with tlr-goUpTwist<\/code> for a rotation effect.<\/p>\n\n
        \"\"<\/figure>\n\n
        Trigger<\/strong>: In IntersectionObserver<\/code>, modify the threshold: 0.2<\/code> (20% visible before triggering).<\/p>\n","protected":false},"excerpt":{"rendered":"
        The letter reveal effect gives your headings a modern and eye-catching look: each letter appears one after another on scroll, just like in the animated intros of creative websites. 1. Add the Code in Elementor Prepare your Heading in Elementor Expected Result Customization You can adjust: Speed between letters: var speedOfCharAnimation = 0.02; \u2192 set […]<\/p>\n","protected":false},"author":1,"featured_media":972,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[25],"tags":[22,23],"class_list":["post-981","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-animations","tag-scroll","tag-text"],"acf":[],"_links":{"self":[{"href":"https:\/\/laywow.com\/en\/wp-json\/wp\/v2\/posts\/981","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/laywow.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/laywow.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/laywow.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/laywow.com\/en\/wp-json\/wp\/v2\/comments?post=981"}],"version-history":[{"count":1,"href":"https:\/\/laywow.com\/en\/wp-json\/wp\/v2\/posts\/981\/revisions"}],"predecessor-version":[{"id":982,"href":"https:\/\/laywow.com\/en\/wp-json\/wp\/v2\/posts\/981\/revisions\/982"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/laywow.com\/en\/wp-json\/wp\/v2\/media\/972"}],"wp:attachment":[{"href":"https:\/\/laywow.com\/en\/wp-json\/wp\/v2\/media?parent=981"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/laywow.com\/en\/wp-json\/wp\/v2\/categories?post=981"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/laywow.com\/en\/wp-json\/wp\/v2\/tags?post=981"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}