Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'split text'.

  • 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



Found 12 results

  1. SplitText is an easy to use JavaScript utility that allows you to split HTML text into characters, words and lines. Its easy to use, extremely flexible and works all the way back to IE9 (IE8 for GSAP 2's version). Although SplitText is naturally a good fit for creating HTML5 text animation effects with GreenSock's animation tools, it has no dependencies on GSAP, jQuery or any other libraries. Note that the video below uses GSAP 2's format. .videoNav { color:#555; margin-top: 12px; } 0:00 Intro 0:21 SplitText solves problems 2:01 Basic Split 3:34 Config
  2. I am using Split Text (v.0.5.8) to create a simple line by line animation which works awesome. I've run into an IE11 issue when I use<sup> tags in the string they get broken out into their own div which is set to be a block element. So my initial div: <div id="txt">I can't wait <br>until we drop IE11<sup style='font-size:50%;'>®</sup>!</div> <script> var t1 = new SplitText(document.getElementById("txt"), {type:"lines", linesClass: "line-span", reduceWhiteSpace:false}); </script> will print 2 divs in most browsers as expected. <div
  3. Hey guys, Hoping someone can help me out. My Problem: Split text is being applied before my font has actually rendered in the browser which results in abnormally large letter spacing. My assumption is the fallback font is being used for the split text calculation prior to my imported fonts being rendered in the browser (thus, when my fonts are rendered, they're not formatted correctly). I'm 90% sure this is the cause of my issue, although let me know me if otherwise! The issue occurs about 50% of the time (the other 50% renders as expected) and at the moment it's only h
  4. Hello everyone, how can I animate with GSAP a gradient text using the css code below? Or some other way. background: linear-gradient(to right,#3b1c52 50%,#b51a84 80%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  5. Hello, I guess my problem wouldn't be such to an experienced person, however, since I'm not good at JS at all, I have this case where I am applying split text effect on two separate h1 tags and when I try to apply allDone on both of them, it doesn't work. When I apply allDone on the first h1, the second h1 doesn't get affected by the split text effect at all. When I apply allDone on the second h1 tag it all works but, of course, I would also need allDone applied to the first h1 as well. Also, defining the function for allDone two times doesn't work as well...
  6. Hi there, I'm trying to use greensock to recreate an effect I see everywhere. Here is an example of it. http://www.jennyjohannesson.com/klm I'm referring to how the Bluey text and body appears on the portfolio page. I would like to have the text appear from the baseline. I can re-create this effect using a wrapper with visible set to off but ideally I would not use a wrapper. It seems like there should be a straightforward way of pulling this off but I'm not sure how to do it. Thanks in advance for your help.
  7. Hi, I was trying to analyze why this Split Text seems to shake in chrome. This is from the SplitText Collection in Codepen for GSAP. Why is this?
  8. I'm having to split and animate text that contains special characters and markup that the SplitText utility doesn't seem to handle. I've included a sample of the markup I'm dealing with and it contains an example of the types of characters that SplitText doesn't recognize (flames and apple chars, plus color markup). Since I'm pretty new to all of this I'm hoping there is an easy fix to my dilemma that I just haven't learned yet. I don't know if these are UTF-8 characters or what. I hope the characters will continue to show after I've posted them here. They are displayed properly by the browser
  9. Hi guys, I am working on a portfolio site (http://werkstatt.fuelthemes.net/portfolio/paloma-rincon) 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.
  10. Hi there Does anyone know how to adjust the font size within the split text GSAP? Any help would be appreciated. Thanks Dan
  11. http://codepen.io/redag555/pen/MKBLmE Trying to animate line 3 (eventually all 3 lines) but can't get it to work - what am I missing? Thanks. r
  12. I can't seem to get this working. I am trying to scale a textfield (by letter) from the center, but whatever I change regOffsetY to, it always scales from the top left corner. What am I doing wrong? Thank you. Peter test.fla.zip