Jump to content

Search the Community

Showing results for tags 'splittext'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



  1. I put together a codepen for this issue but the codepen appears to work fine. I've attached a copy of the error message I'm seeing in the console and the script is definitely failing to run correctly on the site I'm building. Any thoughts as to why this is working on codepen but not on the site?
  2. I'm trying to use SplitText with some text that contains emoticons. However, splitting an emoticon with an empty string will yield two garbage characters " ??:".split("") ["�", "�"] Here's an article that mentions the problem: https://mathiasbynens.be/notes/javascript-unicode I can hack a workaround, but is there any chance this will be supported in the future?
  3. I'm loading splitText and this happens: Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'. SplitText.min.js:13 Please help. EDIT: in firefox: TypeError: Argument 1 of Window.getComputedStyle does not implement interface Element. http://www.xxxxx.xx/js/gsmin/utils/SplitText.min.js Line 13
  4. I have a question on the SplitText and ScrambleText plugins, which were briefly covered in Carl's (awesome) course last week. Is it possible to randomize the order of the animating type? For example, if I am using SplitText to spell "ANIMATE" character-by-character, is there a way to not have it animate 'A' then 'N' then 'I' etc?
  5. 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.
  6. Hi, I'm animating in some text with a typewriter effect. Problem is sometimes a few characters are not displaying. I'm using Adobe Edge and previewing in Chrome. Anyone else had the same problem?! Many thanks chaps,
  7. Adding any < or > characters to a text causes these characters and anything enclosed between them to be omitted from the resulting text. There is also a related issue where <br> causes an exception in SplitText.js:206.
  8. Hi all, I'm in the process of making a headline page with typewriter-ey effects and large epilepsy-inducing text replacement. I've managed to use the TextPlugin to great effect for my primary headline (turned off for the purpose of this question in the blockLetters timeline). What i'm struggling to do is combine both the TextPlugin and SplitText to effect as you can see in the timeline that's active (albumLetters). Ideally i'd want the div to be empty on load then I can control the entire thing through GSAP but it doesn't seem to want to change the copy in the fullText div after SplitText has done it's thing. Any ideas?
  9. Hi! New to Greensock, but very much impressed with the tools - this stuff is truly incredible. I'm hoping to get some help with a text animation I am creating using SplitText. I would like to animate the text from the center of the sentence out (as seen in attached gif). Can anybody help point me in the right direction on this? So far, I've been able to create a similar effect using: 'TweenMax.staggerFrom(mySplitText.chars, 0.6, {y:100, autoAlpha:0, ease: Circ.easeOut}, 0.05);' However, that is not exactly the effect I am looking for. Is there anything inn particular I should be looking at to create this effect? Possibly leveraging TimelineMax for the animation timing functions?
  10. Hi, I'm having trouble getting the revert() function to work after the following SplitText Timeline Tween with a random character order... http://codepen.io/GreenSock/pen/HafFE Can anyone help me out? Thanks! ~ Kyle
  11. Good morning, I am working on an animation where i have text animating on by character using splittext field. All i am doing with them is changing opacity from 0 to 1 using the TweenLite.staggerTo method, in a timeline. Everything works fine, in my init funciton i have to set the tweens to have properties in the slightly odd following way: (header1Chars is a variable of header1.chars) but everything works correctly. TweenLite.to(header1Chars, 0, {alpha:0}); TweenLite.to(header1, 0, {alpha:1}); I loop my animation three times, and on the third time (first two are ok), when the animation is restarting, the text is half visible, it's as if the tweens have not completed/reset themselves even though the previous run went fine. Is there a way to ensure that tweens will reset ready for the next animation run? Please note that there is a series of text being animated in this way in the timeline. thank you, please let me know if i can elaborate: ps i tried a codepen and it didn't seem to work for some reason, but i didn't have the time to spend too long on that so i hope everything here makes sense, Thanks once again, J:)
  12. Hi. I am new to gsap and like to reproduce the simplest splitText Example from the SpitText Introducing Video: http://greensock.com/SplitText This runs in codepen http://codepen.io/anon/pen/LVrzxN?editors=101 But not on my local machine. Why not? The SplitText.min.js File is loaded local. An thats what it looks like in Chrome.
  13. Hi, I've been playing with your cursor demo and trying to incorporate it into a TimelineMax (just to get me started as I'm new to all of this). I'm seeing some random delay though in between the cursor stopping blinking, and the text actually being typed and I can't narrow down where it's coming from as it doesn't seem to happen in the original Codepen (although there were some errors in that for some reason!) In addition to that, Chrome is getting a lot of the following messages, these happen at the same time as the delay so I've obviously got something mixed up. invalid top tween value: NaN Does anyone have any ideas as to the cause of the delay and the errors? I've forked the original Codepen, and then recreated the delay by copying my code back in http://codepen.io/padders1980/pen/YXeMYN
  14. Is there a way to use superscript with SplitText?
  15. The issue: When replaying the SplitText animation, some of the letters on the right are not starting the animation straight away. Instead of sliding in as they are supposed to, they are already positioned and only start the animation from there. This doesn't happen when the animation plays for the first time, only when revisiting the first slide after paging through the other slides. This happens in Firefox, Opera and IE latest version.
  16. tsarma


    It would be nice, if there is an option to supply for word delimiter. For example following text is in tibetan "རེས་གཟའ་སྤེན་པའི་ཉིན" It composes of multibyte unicode characters and it has a word delimiter char '་' instead of blanks as in latin chars.
  17. Hi, I am working on building a signage app where content is played in loops. I.e. some animation is played then hidden then another animation is played and once through the loop it all restarts again. If I call splitText() in each loop what happens to the many instances that are created? Do they get cleaned up or do I have to do this? Is there a way I can monitor the memory to see what happens?
  18. HyPerr

    Unicode Characters

    Hi, are there any issues when using SplitText with Unicode characters? Thanks.
  19. Hi Guys, Quick question. I noticed that using SplitText, if the <div> element being passed to the SplitText tool, has an image or any other tag inside, that tag is changed into an empty <div> by the SplitText tool. Is this by design?. <div class="content" id="content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non quam elementum enim tincidunt suscipit a et lacus. Nunc eros mauris, semper at pellentesque eget, pretium ut lacus. Sed in pulvinar turpis, vitae congue nisi. Mauris aliquam finibus molestie. Duis a volutpat ligula. Nullam lobortis lorem justo, ac gravida arcu mollis quis. Curabitur condimentum diam imperdiet, iaculis libero eget, tempor turpis. Phasellus neque turpis, pretium sit amet nibh ut, egestas rutrum ex. Nam sodales mollis elit ut consequat.<br> <img src="http://s.cdpn.io/16327/logo_robust.jpg" /> </div> The <img> in the code above gets replaced by an empty div. The solution I've found is wrap the text into an extra <div> element and pass that one to the SplitText, thus preserving the <img> element: <div class="content"> <div id="content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non quam elementum enim tincidunt suscipit a et lacus. Nunc eros mauris, semper at pellentesque eget, pretium ut lacus. Sed in pulvinar turpis, vitae congue nisi. Mauris aliquam finibus molestie. Duis a volutpat ligula. Nullam lobortis lorem justo, ac gravida arcu mollis quis. Curabitur condimentum diam imperdiet, iaculis libero eget, tempor turpis. Phasellus neque turpis, pretium sit amet nibh ut, egestas rutrum ex. Nam sodales mollis elit ut consequat. </div> <img src="http://s.cdpn.io/16327/logo_robust.jpg" /> </div> Thanks, Rodrigo.
  20. Hello! I noticed that if I use SplitText on a div containing text, and that div has a class defining a font, than Splittext will fail in creating the lines array, making an array of lines that is pretty much wrong: the lines are always too long or too short, never correct. I've made a small example in codepen up there: can you tell me if I'm doing something wrong? Cheers! Alex
  21. I'd like to use greensock SplitText plugin in an offline html5 phonegap applciation, as you need to have a membership to use this plugin how does that work with offline applications?
  22. Hi, I would like to update parameter from a timline created with splitText plugin. I'd like my h1 to appear from bottom on load (and scroll to the top) and disappear to top. My idea was to change a variable (decalTxt) As you can see I use reverse() but I would like to change my y position. I can't find an issue and I'm getting mad !
  23. I don't actually need this functionality but since it's clearly a bug I thought it's worth reporting. Having a '<br>' string when using splittext chars animations, will turn it into '{{LT}}br>'. http://codepen.io/patrickklug/pen/wFkbL
  24. I'm using SplitText (see below) - I'm using a script font from Google Fonts & some characters get cut off (on the left side). Parts of their shapes are sometimes below the character before & then this happens. I've tried to apply a class called words that set the overflow to visible but that didn't help. overflow: visible; This is happening in IE & Chrome during animation - but then as soon as the animations stops it shows the complete letter. No cut off letters in Firefox & Opera. In Safari the cut off letters remains cut off even after animation. Anyone have an idea how to solve this? Niklas //split greetings txt into words var split = new SplitText("#greetingsTxt", {type:"words", wordsClass:"words"}); //create a TimelineLite instance - animation var tl = new TimelineLite({paused:true, delay:1}); tl.from("#firtreeBells", 0.6, {top:"35%", autoAlpha:"0"}); tl.staggerFrom(split.words, 0.4, {y:-20, autoAlpha:0}, 0.1); tl.from("#logo", 0.6, {bottom:"15%", autoAlpha:"0"}, "-=0.2"); window.onload = function() { tl.play(); };
  25. I stumbled upon another oddity when using splittext on a text with line breaks: <div class="test1">This results <br>in six words.</div> results in six words and one linebreak. <div class="test2">This results <br>in seven words.</div> results in seven words (one of which is empty) and what looks like two linebreaks. The difference between test1 and test2 is that the second one has two spaces before the linebreak. Since a space is normally not treated as a word, this seems like a bug to me. Multiple spaces should be treated the same as a single space. Demo here: http://codepen.io/patrickklug/pen/wFkbL