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 96 results

  1. 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.
  2. 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?
  3. I need to create an animation of words forming a long hashtag. Is there an easy way to use another character as a delimiter besides a physical space to separate words, but have it animate in without any spaces? I want to animate the words of something like "ThisIsAReallyLongHashtagExample" one word at a time, with no spaces. Obviously I can't use spaces as a delimiter, but is there something else I can insert between words to let splitText know where to chop it up? thanks for any insight! - matt
  4. friendlygiraffe

    Get x, y coordinates from SplitText

    Is it possible to retrieve the coordinates from a SplitText array? This outputs undefined var mySplitText2 = new SplitText("#quote2", {type:"chars"}); console.log(mySplitText2.chars[0].x); Thanks
  5. I've run across an issue where I am pulling a chunk of text from a database and some of the words are hyphenated. When I try to use SplitText to animate the text block and then revert it once it's complete ( so the paragraph flows properly on resize ) there is a jump between the split text render of the text and the reverted state. The jumps occur when hyphenated words are close to the end of a line causing a line-break mid-hyphen. ( See Pen ) Is there a good way around this without having to adjust the text coming in? Thanks.
  6. edonbajrami

    Splittext on window resize

    Hi, I have a text inside a div and then I'm calling SplitText function to seperate them into lines. But on window resize lines remais too long for mobile and I need them to recalculate on window resize to fit into browser witdth. How can I update on window resize lines that are created from SplitText ?
  7. For fun I modified an old jQuery plugin I wrote to create modal dialog boxes so I could try out some of the new features in GSAP 1.18. My goal was to create a plugin with the following features: Automatic sizing regardless of dialog contents. All the standard features you would expect from a dialog plugin. GSAP animation using splittext and cycle. A simple method to change the coloring scheme of the dialog without changing the underlying css or requiring a complex string of styling options. To achieve this I utilized the relative HSL feature. So far, I am pretty happy with the results so I thought I would share it with the community. Feel free to fork any improvements, additions, or corrections. If anyone finds this usefull, let me know and I will add it to Github as a jQuery plugin once I have had a chance to review and finalize the javascript. I also attached the js file for the plugin since the js on Codepen is minified. alphaDialogCodepen.txt
  8. hellol11

    .staggerTo() not working

    I want to make a small animation just for fun, but as I make it, I notice it doesn't play. Can someone please help me?
  9. chrisk

    SplitText and iFrame support?

    Hello all, We're trying to integrate SplitText into our solution, content will come from a JSON endpoint which is entered from a WYSIWYG. When using SplitText, it seems to omit the iframe element. Is there any recommendations around that? Thank you Chris
  10. 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?
  11. pixel-fiend

    Emoticons in SplitText

    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: I can hack a workaround, but is there any chance this will be supported in the future?
  12. YRSantiago

    SplitText Fails

    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
  13. 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?
  14. 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.
  15. 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,
  16. b.strauss

    Splittext - keep br tags

    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?
  17. 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.
  18. ochalmers

    Combining SplitText and TextPlugin

    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?
  19. 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?
  20. Hi, I'm having trouble getting the revert() function to work after the following SplitText Timeline Tween with a random character order... Can anyone help me out? Thanks! ~ Kyle
  21. 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., 0, {alpha:0});, 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:)
  22. Sandschieber

    simplest splittext does not work

    Hi. I am new to gsap and like to reproduce the simplest splitText Example from the SpitText Introducing Video: This runs in codepen But not on my local machine. Why not? The SplitText.min.js File is loaded local. An thats what it looks like in Chrome.
  23. 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
  24. robonic

    SplitText and superscript

    Is there a way to use superscript with SplitText?
  25. deanpien

    SplitText chars problem on restart

    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.