Jump to content

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

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL







Found 11 results

  1. Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. While it is backward compatible with most GSAP 2 features, some parts may need to be updated to work properly. Please see the GSAP 3 release notes for details. 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 IE8. 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. .videoNav { color:#555; margin-top: 12px; } 0:00 Intro 0:21 SplitText solves problems 2:01 Basic Split 3:34 Configuration options 6:35 Animation View the JS panel in the Codepen demo above to see how easy it is to: Split text into words and characters. Pass the chars array into a TweenMax staggerFrom() tween for animation. Revert the text back to its pre-split state when you are done animating. Additional features and notes You can specify a new class to be added to each split element and also add an auto-incrementing class like .word1, .word2, .word3 etc. View demo You don't have to manually insert <br>tags, SplitText honors natural line breaks. SplitText doesn't force non-breaking spaces into the divs like many other solutions on the web do. SplitText is not designed to work with SVG <text> nodes. Learn more in our detailed SplitText API documentation. Please visit our SplitText Codepen Collection for more demos of SplitText in action. Where can I get it? SplitText is a membership benefit of Club GreenSock ("Shockingly Green" and "Business Green" levels). Joining Club GreenSock gets you a bunch of other bonus plugins and tools like ThrowPropsPlugin as well, so check out greensock.com/club/ to get details and sign up today. The support of club members has been critical to the success of GreenSock - it's what makes building these tools possible.
  2. 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;
  3. 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... Thank you! var tl = new TimelineLite, mySplitText = new SplitText(".is-returning h1.line-1"), chars = mySplitText.chars; TweenLite.set(".is-returning h1.line-1", {perspective:400}); tl.staggerFrom(chars, 1.2, {opacity:0, scale:0, y:120, rotationX:180, transformOrigin:"0% 50% -50", ease:Back.easeOut, delay:6.8}, 0.01, "+=0"); /*I want to place an allDone parameter here too but it doesn't work this way*/ var tl = new TimelineLite, mySplitText = new SplitText(".is-returning h1.line-2"), chars = mySplitText.chars; TweenLite.set(".is-returning h1.line-2", {perspective:400}); tl.staggerFrom(chars, 1.2, {opacity:0, scale:0, y:120, rotationX:180, transformOrigin:"0% 50% -50", ease:Back.easeOut, delay:9.8}, 0.01, "+=0", allDone); function allDone(){ mySplitText.revert(); }
  4. 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.
  5. 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 happening on IOS Safari / Chrome (so far from what I've tested) which makes it hard to debug. I've also tested and found this problem occurs more frequently when my font loads slower than usual. The problematic font is loaded from AWS, although I've also had the same problem loading fonts from Google. I've seen questions regarding this issue thrown around a few times, although I couldn't seem to find a robust / official solution (mostly hacks or the use of the Webfontloader (https://github.com/typekit/webfontloader) which looks great, but I can't seem to get working). Here's an example of what I'm seeing: Good: Bad: Has anyone got this figured out? Thanks guys! Ryan
  6. 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?
  7. 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 browsers just not after I've split them. Any advice would be greatly appreciated. — George <div id="quote">This Friday
  8. 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.
  9. Hi there Does anyone know how to adjust the font size within the split text GSAP? Any help would be appreciated. Thanks Dan
  10. 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
  11. 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