Search the Community

Hi there! I have prepared a codepen that will hopefully help find the solution to my problem. I am using both ScrollTrigger and SplitText to try to animate some text. My goal is to do the following: 1. Have the first h1 animate into the page when the page loads. 2. Once the user scrolls down a bit, the h1 will animate out and the h2 will then animate into the page. This "works". The issue is once you scroll back up. When you scroll back up the h2 will animate out and the h1 will animate back in, however the h1's first character will not be visible. I noticed that if I comment out the first part of my timeline (the from()), it then works perfectly, however I can't seem to get it to work if I animate the h1 when the page loads. Here's another codepen showing what I just mentioned above (commenting from()): https://codepen.io/julienkos/pen/MWEVvQE. Please let me know if you can help! I appreciate it.

Hi! I'm having problems with some Vue components in Nuxt and SplitText. I'll try to explain: I have a global mixin that detects all [data-animation] elements with the scroll and fire an specific animation. Some of these elements are components and ha. This works fine when I use opacity, X and Y, scale, etc... but when I use Split Text it doesn't. I got an hydrate error and the animation doesn't work. This is the code for the animation: if (elm.dataset.animation === 'lines-down-up-mask'){ var split = new SplitText(elm, { type: "lines", linesClass: 'lineParent' }); var split_parent = new SplitText(elm.getElementsByClassName('lineParent'), { type: "lines", charsClass: 'lineChild' }); gsap.set(split_parent.lines, { y: '110%' }); gsap.to(split_parent.lines, { scrollTrigger: { trigger: elm, scrub: false, start: 'top bottom', }, stagger: { each: 0.1, ease: 'power1.in', y: 0, }, onComplete: function(){ split.revert(); } }); } This is one of the components: <Partners data-bg-color="white" data-text-color="black" data-logo-color="black" data-scroll-section :title="partnerList.title" :partners="partners" /> And inside the component I have this: <template> <section class="partners"> <div class="headline headline--4 partners__title" data-animation="lines-down-up-mask">{{ title }}</div> <MovingMarquee :images="partners" partner_logos /> </section> </template> I hope someone could help me, because I don't know why it happens :( Thanks

Hello, I'm encountering what I believe is a very similar issue to this thread, but I can't seem to get the applicable part of the solution to work in my context. I have some large hero copy in a narrow container with a hyphenated word that SplitText is unable to break apart. From what I'm reading in the linked thread, this is happening because the one "word" cannot be split into multiple divs, so I need to swap in a non-breaking dash character in for the regular one, but I'm not having luck pulling that part out into my demo. Attached a couple of screenshots in case the hyphenated word is not rendering at the same spot on your end in the Codepen example.

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

Hello GSAP friends! I am having trouble combining some ScrollTrigger and SplitText features in the correct way. I have several sections that use ScrollTrigger to pin when in view and have a timeline that animates their opacity in and out. (section.slide) Of these sections, those that also have the class 'slide-text' are using SplitText to split their H2 content for animation. (section.slide.slide-text h2.animatedcharacters) I'd like the text to also use SplitText's animation feature to animate the text via scrub when its parent section comes into view both onEnter and onEnterBack, with it resetting onLeave and onLeaveBack. I've looked at several demos and have pinned down the SplitText animation I'd like to use (see the comments at the end of my JS). Please see my attached CodePen. I have the pinned sections the way I'd like them, and I also have the text splitting, but I don't know how to integrate the SplitText animation into the existing scrollTrigger params and timeline. Apologies, but this is as far as I've gotten, I can't seem to combine the various demo content I've explored to get the code for my specific case. Many thanks!

Hey all, I'm trying to experiment with SplitText, So I have a simple menu with submenu, blue colored menu items have children, when user click on it first level menu items will move up and submenu will appear from bottom, I want to use stagger for each char, but stagger also will be implemented for menu items, what I don't want. I understand that I'm doing it wrong, but I can't imagine what should I do. Can you help me, please?

Hello! I would like to animate a stagger tween from the last element. For instance, start a splittext animation from the last word. I can't use tweenmax.reverse() because my stagger animation is a part of a timeline. I tried different combination but it did not work as planed. Here a sample of the timeline. var tl = new TimelineMax(); tl.insert(TweenMax.to( arrowP,0.6,{css:{left:0, opacity:1}, ease:ease1})); tl.insert(TweenMax.to( arrowP,0.2,{css:{left:40, opacity:0}, delay:0.6, ease:ease1})); tl.insert(TweenMax.from( arrowSpan,0.6,{css:{left:-200}, delay:0.2, ease:ease1})); tl.insert(TweenMax.staggerFrom(mySplitText.chars, 0.2, {autoAlpha:0, x:-40, delay:0.2, ease:ease1}, 0.02)); So, do you have an idea of how I could proceed if it is possible ? Thank you so much for your help!

Hi, when i use the splittext plugin on a H1 element the result does not contain the BR tags i placed inside the H1. I always want to break at that text position. I don't want the plugin to inline everything. I also don't want to specify the width of the container. How do i prevent Splittext from removing the BRs?

Hi everyone, I’m discovering GreenSock animation framework, seems pretty powerful. But I’m struggling reproducing the following text animation (that maybe some of you will find basic?) : https://www.buildinamsterdam.com (by animation, I'm speaking about the very first text animation on black screen where text appears from the bottom by words, then disappears on the left by chars, then black background disappears by collapsing into 3 vertical bands) Before asking for your help, I've done my research on the forum and I discovered the need to use SplitText add-on. I've set up a first approach on this pen : For the exit animation, how do I handle the "overflow hidden" wrapping of all chars to make them disappear when they move left ? How should I start for the 3 vertical bands reveal animation ? Thanks for your kind help, very much appreciated

Hello, I'm using SplitText to add animation to lines of text based on the following example: gsap.from(split.lines, {duration: 1, x: 200, autoAlpha: 0, ease: "power3", stagger: 0.05}); The animation is working as expected. However, as the text is split into separate tags it means that it's not responsive and leaves whitespace (which is shown in the gsap example). Is there any way around this? Any help would be appreciated. Thanks

Hi there, I have been working on a horizontal scrolling page with ScrollTrigger. Within this we want to be able to animate text headings as they come into view. In the pen there are 5 slides with Slide 2 and Slide 4 both with headers that we want to animate. Ive nearly got it working but : Slide 4 starts in its completed state and doesn't animate until it hits the Start point. So it is sitting on the left and then it jumps to the from point and animates. I think Im doing it in a very inefficient way and that maybe the ScrollTrigger needs to be with the SplitText tween but I went down that path and got myself in a mess! Any assistance would be hugely appreciated! Cheers, Mike

Hi, I have made a vertical slider with text, i want to add in the SplitText plugin that i have added but doesn't seem to work it on the code. I have added the codepen below. Can anyone help to see where i am going wrong. Thank you very much

I am putting together a simple (I thought) animation using SplitText. I am wanting a line of text to appear from left to right with a click of a button; and a line of text to disappear from left to right with a click of button. I got the appearing text to work, but I am having issues with the other. I can get the text to disappear as desired as desired, but it seems the only way I can get it to work is to have the text displaying on the screen, first. That is not what I want. I need the text to be invisible first, then appear from left to right after the button click. Here is my kinda-working code. Please see codepen. I have tried using css to set the opacity to zero and work from that, but I can’t get the text to appear at all from that angle. Could someone offer-up some insight?

Hello everyone, May I ask for help. I have this splitText animation, but would love to have X and OPACITY animation to be with different duration. e.g OPACITY to be 1.5s but X to be 1s. https://codepen.io/styuit/pen/poybGqQ E.G. like with transitions https://codepen.io/styuit/pen/QWNEowJ Is there is any way to achieve multiple animations for same char? Thank you!

Hi, This is my first time posting in the forum! I searched everywhere but could not find the answer so here goes. I want to animate a line of text on a motion path. At the moment it is not working as the characters all end up on top of each other. I think it has to do with the start/end within the path that's being set but I do not know how to add code to address this. (FYI my end goal is to animate the three lines of text on three different motion paths perhaps using the class for each line. Any help would be appreciated.)

Is it possible to have a <span> or other inline element with a hard line break (<br> element) break correctly inside a SplitText element? For example, to have "ipsum" and "dolar" break correctly in my Codepen. I thought this was the answer, but the nestedLinesSplit function there didn't do the job.

Hi, I am looking for a solution that combines the two different text animations like on the websites below, I am also using fullpage js. https://wirewerks.com/en/about-us/ https://21-capital.com/ So on each index of the page I am using if function for the animation, although without reverting the splittext it creates a duplicate each time i scroll to the specified animation page as it runs it again and again, that is why i had to revert it. Sorry for not being able to replicate the code work on codepen. var mainTitles = new SplitText('.strength-title h1, .free-session-title h1', { type: "lines", linesClass: "line line++" }); $('.strength-title h1 .line , .free-session-title h1 .line, .photobio-title h1 .line').wrap('<div class="line-wrapper">'); TweenMax.staggerFrom( mainTitles.lines, 2, { yPercent: 100, ease: Power4.easeOut, delay: 1 }, 0.25, splitRevert ); $('.strength-title h1, .free-session-title h1').css('visibility', 'visible'); var tp = gsap.timeline(), mySplitText = new SplitText(".photobio-title p", { type: "lines,words" }), chars = mySplitText.lines; tp.fromTo(chars, 1.5, { opacity: 1, y: 0, ease: Power4.easeOut, stagger: 0.15, // }, { // opacity: 0, // y: 100, // ease: Power4.easeOut, // stagger: 0, // }, "+=0"); // // function splitRevert() { // $('.strength-title h1 .line , .free-session-title h1 .line , .photobio-title h1 .line').unwrap(); // mainTitles.revert(); $('.photobio-title p').css('visibility', 'hidden'); mySplitText.revert(); } This formation is not currently working smoothly for me, if anyone has a possible solution please kindly do help me. Thank You

Hi! I have an animation that reveal my texts line by line with SplitTextJs. The problem I have is that I have my paragraphs that are splited line by line but my lines wraps so one line is now 2 lines It happen mostly when I refresh the page without the cache. On my codepen I need to refresh more than once without the cache to get the problem. Also, sometimes I have a problem with the split when I have some words in italic or in a span. Thank you!

Working on a project whereby a little creativity is called for. I have attached a zip file that contains the results of running forced alignment on a transcript using gentle that aligns an audio file to its transcript. I am looking for a way to "animate" the text as the speech is spoken in order to maximise the focus on the text being spoken as it is spoken. If someone looks away and comes back to it - they should be straight in. It is kind of like subtitles but for audio - except I want it to be as creative as possible. I originally had in mind - simply fading the text in and out whilst scrolling see the links to the examples I have tried out. Please also bear in mind that the actual audio may be over an hour long, so the animation needs to take into account the stream effect of keeping only the current text in focus (related to what is being spoken at the playhead). Any text that is not within 20-25 words of the word being spoken is not really relevant - unless it is and I'm not seeing it. Furthermore there are certain words that the forced-aligner does not pick up and marks them as <unk> - in the example "specialise" is an unknown word because it is spelt wrong. It is an American speaking so it should be spelt with a 'z'. However - there should still be a start and end number for the timeline. { "alignedWord": "<unk>", "case": "success", "end": 16.19, "endOffset": 301, "phones": [ { "duration": 0.69, "phone": "oov_S" } ], "start": 15.5, "startOffset": 291, "word": "specialise" }, http://jsfiddle.net/wuj6xqpz/18/ https://codesandbox.io/s/fervent-villani-vbero https://codepen.io/rustyleaf/pen/oNNwZpB 314a0bf1.zip

Hey there! Can anyone help me with this? I am new to this thing, really trying hard to get my hands dirty with tweenMax. PROBLEM: I am trying to animate text in words by using SplitText, The thing i am trying to do is to change text on repeat. but can't do so. https://fastfoodsignage.herokuapp.com/ go to the second section, There is an animation, I am trying to give it YoYo effect, so it can look like a typewriter, and on repeat want to change innerHTML and update the splitText Codepen link: https://codepen.io/ifaizanahmed/pen/qBWgZGg demo1.mp4

Hi. I am new to GSAP and before getting into my query let me first congratulate you guys for such an amazing library and well written documentation! Despite this, I am having some difficulties whenever I try to restart a timeline containing a Splittext tween as seeing in the codepen url. On the first pass (play button), Splittext splits the text as expected and proceeds with he rest of the animation without a problem. During the replay, the text is already under the format required (i.e. chars, words, or lines) but is not being displayed, which I believe relates to the setting of the properties of "text2__hidden" class, and animated. I have tried multiple iterations of the code to no avail. I even attempted resetting the position of the elements manually (as I successfully achieved with a svgMorph tween within the same timeline -not shown on the codependency extract) and quickly discovered how complex this would be given the characteristics of that particular tween (several parameters being animated and some of these include cycles). What am I missing? Thanks,

Hi, I have used TweenMax back in the time when Flash Professionell used to export SWF-files. But anyhow, my problem is: I use a Adobe/GSAP banner template, in which the TweenMax is loaded over https. Works great. I have added SplitText.min.js so that it loads correctly as well. But is it possible to use this in Adobe Animate? I have only used Static textfields before – and I dont know how to use the SplitText now?! I changed to Dynamic textfield, but that removes my font of choice. And the selector for the textfields name – does not seem to work. How can I use Adobe Animate and SplitText together? Is it possible? I just bought the Shockingly Green license to be able to do just this thing ;/ Thanks. Martin

Hello is there a SplitText Plugin for non NPM users? In the package downloaded there's only a JS Module about SplitText Thanks

Hi there, I am testing the splitText plugin on codepen before purchasing a membership. I`ve created an array with my text fragments and injected them with createDocumentFragment. I`ve then created a timeline within my for loop. This works well for animating my objects with staggerTo/staggerFrom. But I seem unable to find out two things: (1) How can I implement some kind of stagger "curve", instead of a straight line graph between the objects? I`ve already tried it with the customEase plugin and getRatio property but with no success. The animation between the stagger objects should start slow and should speed up over time. (2) The last item of the stagger Timeline should remain. I am looping the timeline on codepen so you can get a better sense. But on production side the timeline should only play once and the last item (This text should stay) should remain. (3) Does this way of implementation weigh heavy regarding performance, especially when I end up adding even more words to my array (e.g. 23-26)? Are there any things, I could improve? Would be great if I can some tips from you awesome guys! Have a good day! Pascal