Jump to content

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

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

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL







  1. 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(TweenMax.to($(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.
  2. 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
  3. 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: http://codepen.io/GreenSock/pen/gFHza My Link: http://codepen.io/jbevan2007/pen/BpLbjv 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
  4. 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 ?
  5. 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
  6. 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"
  7. 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? https://werkstatt.fuelthemes.net/werkstatt-text-style/portfolio/the-deer-hunter/
  8. 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 http://greensock.com/docs/#/HTML5/GSAP/TweenLite/invalidate/ however it didn't work. I also tried clearProps: all, which didn't work either. https://codepen.io/Pau1fitz/pen/bwvyBr
  9. 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: http://codepen.io/opendoors/pen/VKPPmB
  10. 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.
  11. 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: http://codepen.io/GreenSock/pen/pbWwLZ
  12. 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.
  13. 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?
  14. 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
  15. 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
  16. 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.
  17. 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 ?
  18. 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. http://codepen.io/hackfin/pen/mVwywQ alphaDialogCodepen.txt
  19. 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?
  20. 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
  21. 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?
  22. 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?
  23. 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
  24. 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?
  25. 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.