{"id":993,"date":"2025-10-11T15:21:32","date_gmt":"2025-10-11T15:21:32","guid":{"rendered":"https:\/\/laywow.com\/animation\/text-appearance-animation-with-blur-effect\/"},"modified":"2025-10-11T15:23:06","modified_gmt":"2025-10-11T15:23:06","slug":"text-appearance-animation-with-blur-effect","status":"publish","type":"post","link":"https:\/\/laywow.com\/en\/animations\/text-appearance-animation-with-blur-effect\/","title":{"rendered":"Text appearance animation with blur effect"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">This effect provides a modern and fluid look: the letters appear one by one with a slight blur that gradually fades away.<\/p>\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n<h2 class=\"wp-block-heading\">Add the Code in Elementor<\/h2>\n\n<p class=\"wp-block-paragraph\">Go to <g id=\"gid_0\">WordPress Dashboard <x id=\"gid_1\"><\/x> Elementor <x id=\"gid_2\"><\/x> Custom Code <x id=\"gid_3\"><\/x> Add Code<\/g>.<br\/>Paste the script below and choose the location <g id=\"gid_4\">End of <x id=\"gid_5\"><\/x><\/g> <x id=\"gid_6\"><\/x>.<\/p>\n\n<pre class=\"wp-block-code\"><code>&lt;script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.11.3\/gsap.min.js\">&lt;\/script>\n&lt;script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.11.3\/ScrollTrigger.min.js\">&lt;\/script>\n\n&lt;style>\n  \/* Conteneur des lettres *\/\n  .letter {\n    display: inline-block;\n    overflow: hidden;\n  }\n&lt;\/style>\n\n&lt;script>\ndocument.addEventListener('DOMContentLoaded', function () {\n  gsap.registerPlugin(ScrollTrigger);\n\n  \/\/ Fonction pour splitter le texte en lettres individuelles\n  function splitTextIntoSpans(element) {\n    const text = element.innerText;\n    element.innerHTML = \"\";\n    element.style.visibility = \"visible\"; \/\/ affich\u00e9 seulement apr\u00e8s split\n    text.split(\"\").forEach(char => {\n      const span = document.createElement(\"span\");\n      span.style.display = \"inline-block\";\n      span.style.opacity = \"0\";\n      span.style.filter = \"blur(8px)\";\n      span.style.transform = \"translateX(-50px)\";\n      span.innerText = char === \" \" ? \"\\u00A0\" : char; \/\/ espace ins\u00e9cable\n      element.appendChild(span);\n    });\n  }\n\n  \/\/ S\u00e9lection de tous les titres avec la classe .text-blur\n  let revealContainers = document.querySelectorAll('.text-blur .elementor-heading-title');\n\n  revealContainers.forEach(title => {\n    splitTextIntoSpans(title);\n\n    let tl = gsap.timeline({\n      scrollTrigger: {\n        trigger: title,\n        start: \"top 90%\", \/\/ quand le titre entre dans la vue\n        end: \"top 20%\",   \/\/ jusqu\u2019\u00e0 ce qu\u2019il remonte\n        toggleActions: \"restart none none reset\",\n        scrub: 1,\n        markers: false \/\/ passe \u00e0 true pour d\u00e9buguer\n      }\n    });\n\n    \/\/ 1. Fade-in global du titre\n    tl.fromTo(title, \n      { opacity: 0 }, \n      { opacity: 1, duration: 0.5, ease: \"power2.out\" }\n    );\n\n    \/\/ 2. Animation lettre par lettre\n    tl.fromTo(title.querySelectorAll(\"span\"), \n      { \n        x: '-50%',\n        filter: 'blur(8px)',\n        opacity: 0 \n      }, \n      { \n        x: '0%',\n        filter: 'blur(0)',\n        opacity: 1,\n        duration: 1.5,\n        ease: \"power4.out\",\n        stagger: 0.05\n      },\n      \"-=0.3\" \/\/ chevauche le fade-in global\n    );\n  });\n});\n&lt;\/script><\/code><\/pre>\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n<h2 class=\"wp-block-heading\">Apply the Effect in Elementor<\/h2>\n\n<p class=\"wp-block-paragraph\">1. Open the page with Elementor.<\/p>\n\n<p class=\"wp-block-paragraph\">2. Select your <strong>heading<\/strong> (Heading widget).<\/p>\n\n<p class=\"wp-block-paragraph\">3. In the <strong>Advanced \u2192 CSS Classes<\/strong> tab, add:<\/p>\n\n<pre class=\"wp-block-code\"><code>text-blur<\/code><\/pre>\n\n<p class=\"wp-block-paragraph\">4. Update the page and test by scrolling \u2192 your text will appear with a blur + fade-in + offset effect.<\/p>\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n<h2 class=\"wp-block-heading\">Tips for Customizing the Animation<\/h2>\n\n<p class=\"wp-block-paragraph\">You can easily adapt the code:<\/p>\n\n<ul class=\"wp-block-list\">\n<li><strong>Modify the blur<\/strong> \u2192 change the value <code>blur(8px)<\/code> (for example <code>blur(15px)<\/code> for a stronger effect).<\/li>\n\n\n\n<li><strong>Change the speed<\/strong> \u2192 adjust <code>duration: 1.5<\/code> (lower = faster).<\/li>\n\n\n\n<li><strong>Appearance spacing<\/strong> \u2192 modify <code>stagger: 0.05<\/code> (0.1 = slower appearance, 0.02 = faster).<\/li>\n\n\n\n<li><strong>Scroll trigger<\/strong> \u2192 adjust <code>start: \"top 90%\"<\/code> (lower = animation starts earlier).<\/li>\n\n\n\n<li><strong>Loop or not<\/strong> \u2192 change <code>toggleActions: \"restart none none reset\"<\/code> (for example <code>\"play none none none\"<\/code> for a single time).<\/li>\n<\/ul>\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n<h2 class=\"wp-block-heading\">Practical Tips<\/h2>\n\n<ul class=\"wp-block-list\">\n<li>Use this effect only on a few headings to avoid slowing down the page.<\/li>\n\n\n\n<li>Combine it with a contrasting background to clearly see the blur.<\/li>\n\n\n\n<li>Test on mobile; sometimes reducing text size makes the effect smoother.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>This effect provides a modern and fluid look: the letters appear one by one with a slight blur that gradually fades away. Add the Code in Elementor Go to WordPress Dashboard Elementor Custom Code Add Code.Paste the script below and choose the location End of . Apply the Effect in Elementor 1. Open the page [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":992,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[25],"tags":[22,23],"class_list":["post-993","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\/993","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=993"}],"version-history":[{"count":1,"href":"https:\/\/laywow.com\/en\/wp-json\/wp\/v2\/posts\/993\/revisions"}],"predecessor-version":[{"id":994,"href":"https:\/\/laywow.com\/en\/wp-json\/wp\/v2\/posts\/993\/revisions\/994"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/laywow.com\/en\/wp-json\/wp\/v2\/media\/992"}],"wp:attachment":[{"href":"https:\/\/laywow.com\/en\/wp-json\/wp\/v2\/media?parent=993"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/laywow.com\/en\/wp-json\/wp\/v2\/categories?post=993"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/laywow.com\/en\/wp-json\/wp\/v2\/tags?post=993"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}