Search the Community

Showing results for tags 'splittext'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 / JS
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL







Found 94 results

  1. icdindia

    Performance Issues on Mobile

    Hi, I am aware my question is not complete but I need help to help you help me Do let me know what more I can provide to find a final solution. We have created an entire website using GreenSock animation. There is one master timeline. Other timelines only perform certain animations. We are using TweenMax along with eraser.js, howler.js, slick.js, splittext.js, jquery-ui.js. The issues is that the website keeps on crashing on mobile devices, including iPhone 6s plus. This is because website is alot RAM heavy and does not work well on any device which has less ram. It includes iPhones, iPads, most android smartphones. It works flawlessly on devices with good ram (OnePlus3). I have used all browsers on the phones on which the website crashed. It is impossible to find the issue as I do not get any error log on crash. I have reach the conclusion that the issue is RAM based on the observation that after restarting the phone the website works fine for a few minutes before crashing again. I have tried to debug it using chrome inspect element but have not been able to reach any conclusion. Following are the elements that I have looked at. - svg animation, I only have 1 single svg animation in the beginning of the website, - dom elements. The number of dom elements was too much because of splittext which is not resolved, - using x and y instead of left and top for better performance, - using scale in only one animation - using autoAlpha everywhere instead of opacity I kindly request you to provide me more details on how can I debug my website. Following is the link : If you require any specific part of the code, I will post it here, please do let me know. Thanks in advance.
  2. dada78

    SplitText PlugIn Console error

    Hi guys, I am using the splitText plugin in a Rich Media expandable unit: I loaded the plugin after TweenMax in this order right before the bottom closing body tag for a rich media Doubleclick creative: <script src=""></script> <script src="SplitText.min.js"></script> <script src="logic.js"></script> In the head I loaded the enabler necessary for the Doubleclick Rich media API to work as intended as usual... The ad works fine, the split text works as intended, it splits the lines and wraps the lines in classes. In the collapsed state it will run an animation that has the split text call in the ad's show() function: function show() { var mySplitTxt = new SplitText('#txt1C', {type:'lines', linesClass:'line++'}); var tlCollapsed = new TimelineMax(); tlCollapsed .set(mySplitTxt, {opacity:0.9}) //more stuff .staggerFrom(mySplitTxt.lines, 0.8, {opacity:0, x:'+=100', ease:powerEaseOut}, 0.08, 'start+=0.5') //more stuff } When previewing in the browser, no error appears. Only after I expand the ad I can see: Console Error: tweenmax_1.19.0_643d6911392a3398cb1607993edabfa7_min.js:15 Uncaught TypeError: a.split is not a function This happens on expand: When the expand button is clicked, the unit expands and runs the tlExpand timeline. expandButton.addEventListener('click', onExpandHandler, false); var splitTxt1E = new SplitText('#txt1E', {type:'lines', linesClass:'line++'}); var splitLegal = new SplitText('#legal', {type:'lines', linesClass:'line++'}); var tlExpand = new TimelineMax({paused:true, overwrite:'all', onComplete:cardSheen}); tlExpand .set(['#expanded-panel', '#expanded-exit', 'closeBtn'], {display:'block', visibility:'visible'}) .set(['#collapsed-panel', '#collapsed-exit', 'expand-button'], {display:'none'}) //more stuff .staggerFrom(splitTxt1E.lines, 0.8, {opacity:0, x:'+=100', ease:powerEaseOut}, 0.08, 'start+=1.3') function onExpandHandler(){ Enabler.requestExpand(); Enabler.startTimer('Panel Expansion'); } function expandStartHandler() { TweenMax.set(['#expanded-panel', '#expanded-exit', 'closeBtn'], {display:'block'}); TweenMax.set(['#collapsed-panel', '#collapsed-exit', 'expand-button'], {display:'none'}); // add expanding animation here tlExpand.restart(); Enabler.finishExpand(); } I will try to stripped down codepen but in the meanwhile, any clues as to what could be happening that causes the error when the unit is expanded? Again, the animation works as intended. Thanks!
  3. iammarkmulvey

    trigger splitText within a slide show.

    How do I trigger splitText within this slide show so the animation only happens when slide is in view?
  4. Hello GSAP, Why do you lose font treatment (font styles, line breaking, ...) when i do splittext to you with this kind of html code <div class="section-desc"> <h2>My Line 1</h2> <p class="l2">My Line 2</p> <p class="l3">My Line 3</p> </div> Thanks, Carlos
  5. I have a scrambleText span that animates a series of words successfully. However, as it plays, a neighboring div (#homeHeader) vibrates. This happens across Chrome, Safari and their iOS versions. The divs are styled using css grid and media queries and are meant to sit side by side on landscape and vertically stacked on portrait queries. Note that this "vibration" doesn't happen all the time, but I can't identify what makes it vibrate exactly. I've tried to force reloading of cache on the browser but that does not seem to impact it. As stated above, I've tried across different browsers and different devices. I've tried fiddling with tweenLength, but the words are 4-6 characters long so I would not think it would impact the divs sizes that much. In fact, when I look at the divs in Chrome's devTools I don't see their size change at all. Let me know if you need anything else to try to troubleshoot.
  6. Squil

    SplitText problem

    Hello Greensock, i just download the latest GSAP and there is no SplitText.min.js inside the utils folder. Please tell me where can i get one. Regards, Squil
  7. erayner_45092

    Using SplitText and mouse events

    Hello, I was wondering if anyone could provide me with a snippet on how to use SplitText and mouse events? I have done some snooping around but all, so far, has been fruitless. Here is what I have so far var myHeaderSplit = new SplitText(".text-container h1", { type: "words,chars" }); var headerChars = myHeaderSplit.chars; TweenMax.staggerFrom(headerChars, 0.5, { opacity: 0, rotation: -720, scale: 100, ease: Power1.easeOut }, 0.2); headerChars.onmouseover = function () {, .2, { css: { opacity: 0 } }); } any help greatly appreciated
  8. VSDC

    SplitText revert() bouncing

    Hi, i´ve got a problem with SplitText which i just can´t figure out. As you can see here: there is a simple SplitText animation which gets revert() when the animation is done. As the text gets revert it makes a litte jump/bounce. This effect is even stronger when i use webfonts from TypeKit (even after waiting until the font is loaded, before rendering the Timeline). Am i missing something obvious? Thanks a lot for your help!
  9. Adveris

    Splittext.js playing on scroll

    Hello, i'm trying to make splittext animation on scroll using scrollmagic, the animation works but every animations are playing when windows is load, and i want my animations works when the parent section of my "content__text" div is in the viewport Anyone can help me to fix it ?
  10. Hi everyone, Im having a problem where the SplitText plugin is working as smoothly as I have hoped for. Problem is that when user resizes the browser the splits won't update causing the test to display weird line breaks, like these: Is there any way to get around this, perhaps destroying the split after the animation is complete or rebuild the split perhaps? Simply running the split again also doesn't work because it will take the initial split and just split on top of that. Edit: While not my codepen, this also shows the same problem: Thank you!
  11. Todd Shelton

    Opacity in StaggerTo

    This is so simple that I have to be missing something easy. I'm setting the paragraph element to an opacity of 0; Then I'm splitting the text into words. I'm then just trying to stagger the words to an opacity of 1. I can't get this to work. I can make it staggerTo opacity of 0 but not the other way around. Here is my Codepen. TweenMax.set("p", {opacity: 0}); var text = new SplitText("p", {type: "words"}), words = text.words; var tl = new TimelineLite({delay: 1}); tl.staggerTo(words, 1, {opacity: 1}, 0.1);
  12. Hey everyone, I'm stuck with ScrollMagic and SplitText. I'm using SplitText for many classes. I need to replicate the same function all over again in the same page. All the other animations are fine, except for SplitText. splitTextBody = new SplitText(".split-text-body", {type:"words"}), wordsbody = splitTextBody.words; $('section').each(function(){ var textBlock = new TimelineMax(); textBlock.add($(this).find('.underline-body'), .75, {x:0, ease:Expo.easeOut})) .add(TweenMax.staggerFrom($(this).find(wordsbody), 0.8, {opacity:0, y:"100%", ease: Expo.easeOut}, 0.012)) .add(TweenMax.staggerTo($(this).find('.underline-form'), .75, {x:0, ease:Expo.easeOut}, 0.12), '=-1'); var scene = new ScrollMagic.Scene({ triggerElement: this, duration: 0, offset: 0, }) .setTween(textBlock) .addTo(controller) }); I'm able to call SpliText with no problem when it's just one for each page. But not in this case. When I have classes like this I'm not able to figure it out. Thanks in advance for the help! Cheers.
  13. I want to highlight a particular word within the splittext a different color. I'm tying to use a class to target that word, but SplitText doesn't seem to recognize it. How would I get the class to be recognized? Thanks, Elandril
  14. Hello, We recently began implementing GreenSock libraries into our design application, which involves the use of content editable blocks which make up text layers. Our system is built to work with Medium Editor, and works well for any modification, etc we need to make. Now we began implementing animation into our layer system, which will give us entrance and exit effects. I've set up all the tweens and custom animations to the layers, slideIn, rotateIn, zoomIn, bounceIn, etc, using TimelineMax which works amazingly. However when we move to split text, I found a few issues which I ran into, specifically with split text and lines. I've attached an example code pen with the issue, using one of the examples from your repository for SplitText. Your Link: My Link: The issue is when a <br> tag is included after typing and creating new lines, the format is as shown below: <div id="quote"> <p>Text with break tag issue<br></p> <p>Even With New Lines</p> </div> This is throwing an exception DOMException: Node was not found in line 246 of SplitText.js. The code on this line is: "element.removeChild(node)" When commenting, this works as expected, and the node in console reports a <br> tag as expected. Is there any way to prevent this from occurring? I could try some workarounds for this format, but you mention compatibility with most every type of structure (excluding spans, etc). I figured this may be a bug you could fix for other users as well. Let me know. Thanks, Justin
  15. Hi, I'm using SplitText to split some elements in lines and words in order to animate them : var splitText = new SplitText(elements, { type: "lines, words", linesClass: "line", wordsClass: "word", }); Everything is working fine except when my elements are only one-word long. In this case, the split happens, but the line is wrapped into a word, when it should be the opposite, or I just get the word split, without the line wrapping it (I've seen both cases). Is this a known issue ? Is there a way to fix this ?
  16. Vitaliy Bagmet

    SplitText character "jerkiness" issue in Chrome

    Hi dear devs and coders, Please have a look at provided CodePen sample. I'm having/seeing issue - jerky animation of characters - with SplitText in Chrome every time I use it. Especially that's noticeably with slight transforms and on non-Retina display. Not sure maybe I've missed some Chrome spec or tip for solving that. Please help Cheers Vitaliy
  17. Martin Klasson

    Using SplitText in Adobe Animate

    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
  18. Hello Fellow Greensocks, I've noticed some artifacts when I animate text using SplitText library. See screenshot below I wonder, can anything be done to solve this in IE11 for example? I will test adding rotation 0.01 trick, but not sure if it will help. Any ideas? Thanks for anotherwise excellent product, Let the socks be green! ."S"
  19. anteksiler

    Typekit & SplitText

    Since Typekit asynchronously loads the fonts, the fonts change midway during the Splittext animation, causing unexpected line-breaks. How can we wait for the typekit font loading and then run the animation?
  20. I am trying to use Greensock's split text plugin to animate text in on one click and out on another. It is animating in as I want, and working perfectly. However, I am having difficulties animating the text out. It is animating out as I want, however, when the animation is complete, and i try and animate the text back in as originally it no longer works. I have created a code pen here to demonstrate the issue I am having. I have attempted to use the invalidate method however it didn't work. I also tried clearProps: all, which didn't work either.
  21. Sandschieber

    pausing before split text

    Hi there, I like to animate 3 things step by step: 1. an div animation 2. One Second later: H1 Splittext Animation 3. Two Seconds later: H2 Splittext Animation I dont know how to put a pause before the splittext animation. I have tried it with an marker before the splittext loop, but that does not work. I would be pleased for any help Here is my modified codepen:
  22. anteksiler

    SplitText refresh?

    Hi guys, I am working on a portfolio site ( On the top right, there is a button which brings up a box, and then animates the splitted text. However, since the box is hidden on first load, split text does not accurately work.
  23. anteksiler

    SplitText removes spaces

    I just upgraded my membership to get access to SplitText. However, I cannot get it maintain the spaces between words. I am using basic configuration: var splith1 = new SplitText(h1, { type: "chars" }), tl = new TimelineMax(), splith1Array = base.randomize(splith1.chars); tl.staggerFrom(splith1Array, 0.5, { autoAlpha: 0, y: "100%" }, 0.1); It can also be seen on default GS demos:
  24. Hey, I would like to create a matrix style code rain with GSAP using the SplitText Utility, but I've encountered an error when following your tutorial video. not sure what I'm doing wrong... any advice would be appreciated.
  25. Chris

    How do I animate svg text?

    Hello, I just figured out that I can save an illustrator file with live text as an svg image with an embedded font! It seems to work in all browsers that support svg. This seems a great way to have the text pixel perfect without having to use a static image (png24). My next thought was to use SplitText, since svg is a dom element with tags and so on. But it's not supported. ;..( I know "it's a different beast", but at the end of the day it's also just text. Sentences, words, individual letters... Are there plan to supports svg text with SplitText? If not, how would I animate svg text and individual letters otherwise?