Search the Community

I have a problem with how SplitText handles line breaks with Chinese characters. Please see the example below of how this same text looks with and without SplitText implementation. I suspect that is because of ， and 、 characters. They are not treated as line-breakable so something like this is treated as whole word 11.59系列发布五年以来，不断推陈出新，采用极具现代

Hello! I Next.js I got a SectionHeadline component that I need to split into lines to apply animations. The problem is that when I apply SplitText plugin (like I do below) it messes with all of my nested components (it includes things lik WordsLoop slider that has some ScrollTriggers within. All of those scrolltriggers break and nothing works like expected. I wonder what am I doing wrong. The line splitting code (adding divs for each line works), but interestingly on autoreload it gives an error: NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node. When I refresh the page, it's fine. What am I doing wrong? Thank you! "use client"; import { useGSAP } from "@gsap/react"; import gsap from "gsap"; import { SplitText } from "gsap/SplitText"; import type { PortableTextProps } from "next-sanity"; import { PortableText } from "next-sanity"; import { useRef } from "react"; import { WordsLoop } from "~/components/words-loop"; import { cx } from "~/lib/utils/styled"; export function SectionHeadline({ value, className, ...rest }: Pick<PortableTextProps, "value"> & React.ComponentPropsWithoutRef<"div">) { const headlineRef = useRef<HTMLDivElement>(null); useGSAP( () => { gsap.registerPlugin(SplitText); const split = new SplitText("p", { type: "lines" }); }, { scope: headlineRef } ); return ( <div ref={headlineRef} className={cx("block px-32 text-center font-serif text-title-90", className)} {...rest} > <PortableText value={value} components={{ marks: { strong: (p) => { return <strong className="font-heading text-title-70">{p.children}</strong>; }, em: (p) => { return <em className="italic">{p.children}</em>; }, wordsLoop: (p) => { if (!p.value.words) { return <span className="font-heading text-title-70">{p.children}</span>; } return <WordsLoop words={p.value.words} />; }, }, }} /> </div> ); }

Hello, I have a problem with ScrollTrigger. I want to achieve a similar effect to what you see on this page: Julian Fella in the section where the text "I HELPED COMPANIES GENERATE" appears. Currently, my container is pinned at the bottom, and the animation starts too early. I’m unsure how to delay it. Could you help me with this issue?

I've been trying all night to install and import Split text on react, I've tried various ways to import the plugin and this is my current code. import React, {useRef} from 'react' import { useGSAP } from '@gsap/react' import gsap from 'gsap' import { SplitText } from "gsap/SplitText" gsap.registerPlugin(SplitText) Here's the error message I keep getting: Internal server error: Failed to resolve import "gsap/SplitText" from "src/components/Onboarding.jsx". Does the file exist? On further investigation in the node_modules/gsap directory, I realized the SplitText.js file actually doesn't exist, has this feature been deprecated or am I just installing it wrong?

Hey, I have recently updated GSAP in my project from version 3.11.5 to 3.12.5 and noticed one change in the SplitText Plugin which causes errors in handling proper text formatting by skipping non-breaking spaces. After deminifying the file it appears that the newly added eb function inside the z function and its use of a couple of lines below in the conditions test is responsible for not honoring the &nbsp;s in provided texts. Of course, I can comment it out and replace it with the previous version of the condition test but I don't feel OK with making a mess in the library (and have to remember to "downdate" this chunk each time we update GSAP). And foremost I would like to learn if this change is the intended action or a missed error - although there is some difference in the orphans and widows definition between Polish and English, leaving the short word at the end of the line in Polish is considered an error and the correct way to move it to the next line it to "glue" it with the following word by non-breaking space. I am not sure if I will be able to provide the minimal demo for different versions of SplitText/GSAP, but if it is necessary, I will at least try to mimic the input HTML & CSS with the baseline text flow.

Hello everyone, first of all, I want to thank you all for the great insight you provide in this forum so generously. Secondly, please excuse both my English (as I am not a native speaker) as well as my approach to front end (since I am a level below beginner enthusiast). I was dabbling with TextSplit and ScrollTrigger, having a lot of fun, and trying to replicate elements I saw online. In the first pen below, there seems to be no issue (other than the fact that the section stops being pinned before the entirety of the text has been colored). Text Color Scroll #1 https://codepen.io/Aristidis-Lithoxoidis/pen/MWMYzez The same exactly with this pen. Text Color Scroll #2 https://codepen.io/Aristidis-Lithoxoidis/pen/jOjEQLe When I combine the two Text Color Scroll Combined https://codepen.io/Aristidis-Lithoxoidis/pen/JjQoeOY I start having problems. Namely, the second section (the one with a single column) appears -in a most snappy way - before the first section has even disappeared. And then, the second section appears again somehow further down. I have tried everything I could find online for two days now but nothing. The closest I got was when I changed the "end" attribute of the first script to "end: "bottom +=1000px"", but that doesn't seem ideal. I am sure there is a very easy way of fixing - a problem that most probably I created myself - but couldn't find anything online. Thanks in advance.

I have splittext and somehow it changes the color of the typeface or the z-index, i don't know what exactly the problem is. useGSAP( () => { if ( !firstTextRef.current || !secondTextRef.current || !arrowRef.current || !boxRef.current ) return; const splitFirst = new SplitText(firstTextRef.current, { type: 'chars' }); const splitSecond = new SplitText(secondTextRef.current, { type: 'chars', }); gsap.set(splitSecond.chars, { y: 550, visibility: 'hidden' }); gsap.set(boxRef.current, { y: 100, autoAlpha: 0 }); // Set initial state const tl = gsap.timeline(); tl.from(splitFirst.chars, { y: 550, opacity: 0, stagger: 0.05, duration: 0.6, ease: 'circ.out', }) .from( arrowRef.current, { opacity: 0, scale: 0, duration: 0.4, ease: 'back.out(1.7)', }, '-=0.3' ) .to(boxRef.current, { y: 0, autoAlpha: 1, duration: 0.6, ease: 'circ.out', }) .to( splitSecond.chars, { y: 0, visibility: 'visible', stagger: 0.05, duration: 0.6, ease: 'circ.out', }, '-=0.3' ); }, { scope: containerRef } ); it might be because of the chaining or the timeline, i've tried working with z index in css and in gsap as well but nothing really works. is there a solution for this problem? gsap.mov

I'm using the following command to initialize SplitText: new SplitText(".content_wrapper", { type: "words,chars,lines", position: "absolute" }) on the following DOM element: <div class="content_wrapper" style="width: 365px; height: 224px; opacity: 1; perspective: 400px;">Some text that indents with SplitText</div> What goes wrong is the following: The line splits between the word "that" and "indents" SplitText indents the word "indent" with 10px if it thinks that the space between "that" and "indents" does not fit behind "that" anymore. The effect is shown in the attached screen shot and highlighted with the red box. If you make the parent div a bit wider, you can get to the point where SplitText *does* think the space fits behind the word "that" and then the word "indents" is not indented. The problem is related the the following style setting: white-space: pre-wrap; Could you please have a look at this problem and (hopefully) solve it quickly. It goes wrong in a lot of our use cases... Thank you. Pascal.

Are there any issues animating h1 <h1 id=“txt1”>SplitText <br>text.</h1>, or is it best practice to always use divs <div id=“txt1”>SplitText <br>text.</div> when animating with splittext? Thanks

Hi there, I'm having a weird issue when trying to use ScrambleText Plugin to tween a single character, split by the SplitText plugin and searching in the forums, i found the following thread: Split Text / ScrambleText - Random Stagger, which in a comment from @Carl has the following example that i used to create this animation ( I didn't comment there as the thread is from 2015). Greensock SplitText Demo Now my problem is that while tweening the character, the tween has some "dead" time in between each character, i have tried fixing the timing using the duration of each tween, the duration of the timeline and the position of each tween in the timeline but it seems that i don't really understand how the ScrambleText Plugin really works. If anyone has any idea how i can configure this to run as if i was scrambling the text as a single word instead of each character as a regular ScrambleText Plugin tween would please, let me know. Thanks.

Hello! I have recently encountered a problem where I am trying to revert the parent divs after a browser resize, but it is not reverting at all! I am trying to revert the "paragraph-" and "headerParentSplit" before the animation starts (as long as it has been set before) I have tried debugging by console logging this if statement, and it does go through, although it still does no difference. First picture with only one header line, is how it should look like. This is what happens when you enter the website with a fullscreen resolution. The other picture with a red and black background for the header, is how it looks like. The reason behind this is that the div is split into lines when the resolution was smaller (therfore it is two divs). It does not revert with the following code.. function setupSplits() { const paragraph = document.querySelectorAll("p"); const header = document.querySelectorAll("h1, h2"); if (headerParentSplit != null) { headerParentSplit.revert(); paragraphParentSplit.revert(); } var headerParentSplit = new $SplitText(header, { // type: "words", linesClass: "split-parent", }); var paragraphParentSplit = new $SplitText(paragraph, { // type: "words", linesClass: "split-parent", }); header.forEach((header) => { // Reset if needed if (header.anim) { header.anim.progress(1).kill(); header.split.revert(); } header.split = new $SplitText(header, { type: "lines,words", linesClass: "split-line", }); // Set up the anim $gsap.set("h1, h2", { visibility: "visible", }); header.anim = $gsap.from(header.split.words, { scrollTrigger: { trigger: header, toggleActions: "restart pause resume reverse", start: "top 95%", }, duration: 0.7, ease: "circ.easeOut", yPercent: 100, opacity: 0, stagger: 0.015, }); }); paragraph.forEach((paragraph) => { // Reset if needed if (paragraph.anim) { paragraph.anim.progress(1).kill(); paragraph.split.revert(); } paragraph.split = new $SplitText(paragraph, { type: "lines,words,chars", linesClass: "split-line", }); $gsap.set("p", { visibility: "visible", }); paragraph.anim = $gsap.from(paragraph.split.words, { scrollTrigger: { trigger: paragraph, toggleActions: "restart pause resume reverse", start: "top 95%", }, duration: 0.6, ease: "circ.easeOut", yPercent: 100, opacity: 0, stagger: 0.005, }); }); } onMounted(() => { setupSplits(); $ScrollTrigger.addEventListener("refresh", () => { setupSplits(); }); });

Hello, I would like help understanding how to create a hover effect in the text similar to the footer of this site (https://danielvaszka.com/). Can someone help me?

Hello! I want to layout some text on an SVG path and have an animation play in a loop, on hover. On mouse out, the text should go back to its initial state. I used SplitText and the MotionPath plugins in my CodePen and it looks kind of what i want, but i have the following issues: Timeline related: The intended initial layout, is the one you'll see if you comment out addPause (line 44). I thought i'd probably need to change the startTime of the timeline, but that's not working. What am i missing? On mouseout, i'd like to tween the timeline to its initial state (the corrected initial layout), but again not working as expected. Any ideas? SplitText & MotionPath related: Right now the letter & word spacing is off. It's tight to the stagger values. So how can i maintain the default ones? (This animation is intended to work with words of different lengths). Is there a callback i could use onResize that would re-calculate the correct position of the letters? Any help in any of the above would be much appreciated Thanks in advance

Hello Team, we are facing three issues with the SplitText Module. Issue 1: The DOM created by SplitText is not placed in the same position as the original DOM The Original DOM: The DOM created by SplitText: Issue 2: The Word split is not happening based on Whitespace. The words "IS ALL" in the first list items are split like ["I", "S", "AL", "L"] the expected output is ["IS", "ALL"] Issue 3: The Word "There" in the first list items is not underlined in the final output. Kindly note that Note: the user edits all the dom, so we cannot change the DOM structure. CLICK the click here button to start the animation CLICK the reset button to reset the animation and back to its original position.

Hi, I'm rather concerned about splitting a title (Hn) into separate letters. Can Google bots read the HTML generated ? Thanks for your feedback

Hi there! I'm using astro + https://vuejs.org/ components and swup.js for page transitions. I'm also using GSAP for animations I've found a problem while navigating. On first load, text in "TransformAnimation.vue" prints with animation and everything looks and works cool. If I then go to some other page (About, blog..) the text disappears even though js runs and works correctly I thought it was because of swup, but I've seen that if I comment/delete the SplitText GSAP part, the text always appear... I don't get why my GSAP code is deleting the text? :/ I leave a minimal demo(thanks @GreenSock): https://stackblitz.com/edit/testing-astro-swup-vue?file=src%2Flayouts%2FLayout.astro,src%2Fpages%2Findex.astro,src%2Fpages%2Fabout.astro,src%2Fpages%2Fblog%2Findex.astro,src%2Fcomponents%2FTransformAnimation.vue,src%2Fcomponents%2FHeader.astro Thanks!

I modified the official `splitText` example so that the text is not displayed by default, when the `show` button is clicked the text is displayed, when the `disappear` button is clicked the text disappears, then when I click the `show` button again the text is not displayed, I want to click the `disappear` button and then click the `show` button to display the text again, how should I modify it? Thanks

Hello! I've been playing with GSAP on codepen, specifically with the SplitText plugin. Everything works fine in the codepen, Im using a cdn that i found online. But when I install locally via npm, using the gsap-bonus.tgz, it doesnt find the SplitText plugin import { SplitText } from 'gsap/SplitText' Was this plugin deprecated or renamed? Thanks in advance! PS: In the codepen, I'm also trying to achieve the same effect for the split text being used in the following h4 element but on the p tag <h1 class="animated">hello there im animated</h1> I've added an overflowY: hidden to the h1 tag. But its not an optimal solution for when there's more than one lines of text. Was wondering if anyone had any insight as to how to achieve this the GSAP way. <--- Was able to achieve this by adding overflow hidden to inner div elements Thanks in advance!!

Hello... I'm struggling here with such animation that I can't find a solution with CSS, font-stretch is not a solution in this case. At least, is it possible to achieve in web development? It's stretching letters by different positions and angles. Espcieally it's more visible with letter `E` Any help or suggestions please ?

Hello, first time asking here, hope I'll do it well ^^ On my pen, I successfully got a sliptText animation starting when mouseenter the black box. But at first, I was expecting the sliptText animation starting when #creation enters in viewport (using ScrollTrigger) which isn't the case here. Any ideas ?

Hello everyone, I'm currently implementing CSP in our Rails application, we're using SplitText VERSION: 0.6.1 and I'm having some issues with it since it applies some inline styles. Is there a way of modifying this code to not use inline styles or a version of SplitText that doesn't have this issue? Stackoverflow question https://stackoverflow.com/questions/73891388/javascript-inline-style-csp-violation

Hi, I have a SVG text and I'd like to animate it as though someone was writing it. I know it'd be easier with paths elements but I have it as tspans instead. I have tried using drawSVG but it seems that only works with paths. Any help is totally appreciated. The SVG code: <g id="Group_80" data-name="Group 80" transform="translate(-649.918 -257.351)"> <g id="Brand" transform="translate(652.062 329.976)"> <text id="Check_me_out_and_see" data-name="Check me out and see" transform="matrix(0.985, -0.174, 0.174, 0.985, 0, 88.908)" stroke="#000" strokeWidth="1" fontSize="65" fontFamily="Satisfy-Regular, Satisfy" > <tspan x="0" y="61" ref={bstext}> Check me{' '} </tspan> <tspan x="0" y="155"> out and{' '} </tspan> <tspan x="0" y="249"> see </tspan> </text> </g> A screenshot: Thanks

Hello Team , Why does onStart callBack is triggered for the first element passed in array. tl.set([...chars], { opacity: 0 }) tl.to([...chars],{ opacity: 1, ease: Linear.easeNone, willChange: "transform, opacity", immediateRender: false, onStart: placeHand, stagger:duration / chars.length, duration : (duration/chars.length) }); in version 2 it gets called for every element that has been included in the array, if in v3 it triggers only for the first element then what will be the fix, i want to call the onStart callback for every element in the array.

Hi all, I have a working prototype using GSAP SplitText (displayed at the bottom of this post) which stagger-reveals a title, by changing position and opacity of each letter individually. What I'd like to do is mimic the text reveal animation here: http://loveforiceland.com/ which animates each line simultaneously while still stagger-revealing each letter. And the way the letters are revealed are by moving up from behind a kind of mask instead of fading in by animating the letter's opacity. This example gets close: https://codepen.io/camcgreen/pen/qBqMPQp but reveals each line as a whole instead of letter-by-letter. Additional requirements: 1. <a> tags be preserved in the title (as they are in my prototype) 2. The title must be responsive which I imagine means the initial markup can't be grouped by line since line breaks will depend on screen width. Is this possible with GSAP? Thanks!