Search the Community

Hi, I need some help with a split-text animation. I’m animating split text on scroll with staggered effects. The animation works as expected when scrolling down, but when scrolling back up, the first letter (or word) does not appear. I would like to understand why this is happening. Thank you.

Hi, everyone! We've been using SplitText for almost all of the heading animations on our website for a long time and accidentally revealed the following issue. It seems like Google is crawling our H1s instead of Title Tags on multiple pages and as a result— it is not able to read spans SplitText breaks headings into like a sentence. Some of the pages where H1s and other headings are crawled instead of Meta Title and Description display them as separate letters separated by spaces in SERP. Is there any fix possible for that? I don't think I can find similar topics on the forum. Website link I am also attaching multiple screenshots with the issue described. Thanks in advance!

Problem: SplitText doesn't split by lines, when I have nested tag in it.

Hey, I have a problem with split text on mobile. If I resize my desktop screen to mobile size the problem does not apply, possibly because the height of the website does not change and on my mobile browser it does. Attached a video for demonstration, the live link and also the separate js / css. Has anyone experienced this before? Link: https://olafs-dapper-site-9ca308.webflow.io/ [data-split] > span { display: inline-block; white-space: normal; vertical-align: baseline; } .u-text-style-h1 > span { transition: all 0.6s cubic-bezier(0.25, 0.1, 0.25, 1); } .u-text-style-h1.loaded-class > span { transform: translateY(100%); opacity: 0; } let lenis; function debounce(func, delay) { let timeout; return function () { clearTimeout(timeout); timeout = setTimeout(func, delay); }; } function initLenis() { lenis = new Lenis(); // Synchronize Lenis scrolling with GSAP's ScrollTrigger plugin lenis.on('scroll', ScrollTrigger.update); // Add Lenis's requestAnimationFrame (raf) method to GSAP's ticker // This ensures Lenis's smooth scroll animation updates on each GSAP tick gsap.ticker.add((time) => { lenis.raf(time * 1000); // Convert time from seconds to milliseconds }); // Disable lag smoothing in GSAP to prevent any delay in scroll animations gsap.ticker.lagSmoothing(0); } function initSplit() { return new Promise(resolve => { const wrapWithMask = item => { const mask = document.createElement('span'); mask.setAttribute('data-split-mask-el', ''); item.parentNode.insertBefore(mask, item); mask.appendChild(item); }; const split = () => { document.querySelectorAll('[data-split]').forEach(el => { if (el._splitTextInstance) { el._splitTextInstance.revert(); delete el._splitTextInstance; } el.querySelectorAll('[data-split-mask-el]').forEach(mask => mask.remove()); const type = el.getAttribute('data-split'); const splitType = type === 'chars' ? 'words,chars' : type; const splitInstance = new SplitText(el, { type: splitType, tag: 'span', wordDelimiter: ' ' }); el._splitTextInstance = splitInstance; if (el.hasAttribute('data-split-mask')) { const key = type === 'chars' ? 'chars' : type; (splitInstance[key] || []).forEach(wrapWithMask); } }); resolve(); }; const debouncedSplit = debounce(split, 200); window.addEventListener('resize', debouncedSplit); if (document.fonts && document.fonts.ready) { document.fonts.ready.then(split); } else { window.addEventListener('load', split); } }); } function initTransitionDelay() { function transitionDelay() { document.querySelectorAll('[data-td]').forEach(element => { const delay = (parseFloat(element.getAttribute('data-td')) || 100) / 1000; const startDelay = (parseFloat(element.getAttribute('data-td-start')) || 0) / 1000; const splitType = element.getAttribute('data-split'); let spans = []; if (element.querySelector('[data-split-mask-el]')) { spans = element.querySelectorAll('[data-split-mask-el] > span'); } else { spans = element.querySelectorAll('span'); } spans.forEach((span, index) => { const currentDelay = index * delay + startDelay; span.style.transitionDelay = `${currentDelay}s`; }); }); } const debouncedTransitionDelay = debounce(transitionDelay, 200); window.addEventListener('resize', debouncedTransitionDelay); transitionDelay(); } function initFading() { const elements = [ { selector: "[data-fade-in]", init: el => gsap.set(el, { autoAlpha: 0, y: 60 }), action: el => { gsap.to(el, { autoAlpha: 1, y: 0, duration: 0.5, ease: "cubic-bezier(0.5, 0, 0, 1)" }); } }, { selector: "[data-loaded-class]", init: null, action: el => el.classList.remove( "loaded-class") }]; elements.forEach(({ selector, init, action }) => { document.querySelectorAll(selector).forEach(el => { if (init) init(el); ScrollTrigger.create({ trigger: el, start: "top 80%", onEnter: () => action(el), onEnterBack: () => action(el) }); }); }); ScrollTrigger.refresh(); } initLenis(); initSplit().then(() => { initTransitionDelay(); initFading(); }); Screen Recording Jun 3 2025.mov

I have some very simple code with SplitText: document.fonts.ready.then(() => { const texts = document.querySelectorAll("[text-animation]"); if (!texts) return; let splitText; function runSplit() { splitText = new SplitText("[text-animation]", { types: "lines", linesClass: "line", }); } runSplit(); }); For some reason, SplitText seems to be creating multiple nested ".line" divs, I've also noticed the same behaviour when using words. The only CSS applied to the text is color and font size. Any idea on why this may be happening?

Hello, I’m using these animations on a Webflow site: // ANIMATION 1 : Mots ([animate-words]) document.querySelectorAll('[animate-words]').forEach((element) => { let split = new SplitText(element, { type: 'words' }); // Sépare en mots let delay = element.getAttribute('data-delay') || 0; gsap.from(split.words, { y: '110%', opacity: 0, rotationZ: '10', duration: 0.5, ease: 'power1.out', stagger: 0.1, delay: parseFloat(delay), scrollTrigger: { trigger: element, start: 'top 90%', end: 'bottom bottom', once: true } }); }); // ANIMATION 2 : Caractères ([animate-chars]) document.querySelectorAll('[animate-chars]').forEach((element) => { let split = new SplitText(element, { type: 'chars' }); // Sépare en caractères let delay = element.getAttribute('data-delay') || 0; gsap.from(split.chars, { x: '-100%', opacity: 0, rotationZ: '-15', duration: 0.5, ease: 'power2.out', stagger: 0.05, delay: parseFloat(delay), scrollTrigger: { trigger: element, start: 'top 90%', end: 'bottom bottom', once: true } }); }); // ANIMATION 3 : Lignes ([animate-lines]) document.querySelectorAll('[animate-lines]').forEach((element) => { let split = new SplitText(element, { type: 'lines' }); // Sépare en lignes let delay = element.getAttribute('data-delay') || 0; gsap.from(split.lines, { y: '100%', opacity: 0, duration: 0.5, ease: 'power2.out', stagger: 0.2, delay: parseFloat(delay), scrollTrigger: { trigger: element, start: 'top 90%', end: 'bottom bottom', once: true } }); }); I then use the attributes on my text to animate them. On one specific page in development, I noticed that these animations sometimes fail to trigger. Here’s the page: https://agci-preprod.webflow.io/categories/branding-design Each heading has an animation. It’s not always consistent, but sometimes the text animation doesn’t start (I also noticed that when this happens, the ScrollTrigger markers are missing too). When this issue occurs, the text animation only starts once the text element reaches the top of the screen. Do you have any idea how I can fix this to ensure the text animations trigger reliably when they enter the viewport?

I am creating a website project and love this preloader idea, which I was able to get about 80% complete. I am having issues with the removal of chars being jarring, and I would love it if it could be smoother. I am a novice with JS and need some tips or solutions. I want the end result to say E & E. Thank you in advance!

Hello All, I'm just learning GSAP. How can I create this https://gsap.com/text/ animation. i've tried but couldn't get what is going on in there. I have refered to existing post of communties but still no idea.

Hi Dear, I have created a component with split text and scroll trigger in a Next.js project. It works fine on Android but is not functioning properly on iPhone. Specifically, I'm experiencing jerking while scrolling. Can anyone suggest a solution to fix this issue?

help me pls figure out how to break words into letters and make an animation of word replacements endlessly in a loop

I want to animate the background, but it is not continuous with the spaces between words. Is there a way that I can treat spaces as characters, so that they will be animated the same way. Thank you!!! To be as clear as possible I want the background of the spaces to be treated exactly the same as the rest of the characters

Hello All, I need help on Gsap, if you see the link of codepen theres a hover on text, I want something like on this Site on the last section https://dimitriossykovaris.netlify.app/about Hover on the mail u will see the hover Thanks,

click to play button this video is play. But when close this video. click the closed (X) icon then this page jump to top. then scroll down jump to previous section (video section). Please check this youtube video: Previously i am using this code (link below) now its not working.

Just trying 2 different easy approaches to get this typewriter works like a charm! My issue is to sync both animations of the #text element and the chars and I do believe it is really simple to do! I am looking for an easy approach to take down this latency this animation is what i need to edit: // need to sync this block with the above animation gsap.from('#text', {width: 2, duration: 2, ease: SteppedEase.config(20) }) my target is to code this without the use of any other JS Libs like jquery

I have this issue with SplitText where the text inside a <span> is breaking into another line and I have no idea how to fix it. According to the docs they spans shouldn't be a problem, but I don't know what is causing this In my example, the "this is the THIRD line" should be on the same line

Hey guys, I'm using SplitText plugin to show like a typing animation, the problem is that sometimes I have buttons inside the paragraph and the plugin is also typing those character when I don't need the text inside the buttons to have that animation. It's there a way to get avoid that text to be splited? I try several techniques, one was to remove the paragraph with the buttons outside of the SplitText animation, the problem there is that I need the movement to the next line

Hi! How can i animate text from last character to first? I can't find any demo about it. Thank you!

Hi, I'm new here & need some help. I have attached my Codepen here. It's the Part of a bigger Menu. My Text is coming from Left to the Right, So is the is the all of effects & animations. Is there a way to Start the Opacity/Letter-spacing from Right (end of the sentence) to the Left side? So only Text will be Ease-in from Left to Right but all of the animation (Opacity/Letter-spacing) will go from Right to Left ? Sorry, if my question is confusing. Thanks.

Hi there, I am having an issue with reduceWhiteSpace:false on splitText. It doesn't seem to be doing anything for spaces and or &nbsp; I have a font where placing a Y character next to another letter, with a space, it looks like there is no space between them. So I need to artificially add some space. I tried adding a span with margin but I was getting issues on some browsers so I need this reduceWhitespace to work. Thanks for your help Will