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'm working on applying styling to certain words after using SplitText. To do this I'm relying on the word index but I see some inconsistencies when a linebreak is considered a word and when it isn't. The following pen illustrates: http://codepen.io/patrickklug/pen/goGuA As you can see when a linebreak is followed or preceded by a space it will end up as a separate line and word after SplitText but if two or more linebreaks are not separated by anything else, they are combined into one line/word. I think it's fair to consider this a bug. A linebreak should always end up as its own line with its own word, or am I missing something?
  2. When reverting a SplitText operation any trailing line breaks are removed from the text, causing a different result: http://codepen.io/patrickklug/pen/Deiba
  3. I am trying to color some text within SplitText, but it doesn't get red (rood). Is it SplitText or just me again.
  4. Hi Folks, I cobbled my way into translating this character-swapping transition from a previous version that was AS3. This works OK, but it's not quite as smooth as the Flash version was. Also, I think better programmers could make it more efficient. here's my codePen: http://codepen.io/PawleyBoboli/pen/srEmB?editors=001 This seems like it is completely do-able with SplitText and TimelineLite or Max, but I struggled to come up with a solution with those tools. I appreciate any tips or insight. thanks, --Kevin
  5. Hey guys, I am using a rotationX animation with my splitText field, but I can't get the characters to rotate around their center, they rotate around the top of the characters. Any idea how to change the center of the rotationX to be the center of the characters? Thanks in advance. -Boone
  6. Hi Folks, I have been trying to add a SplitText animation to my accordion menu but I cannot get the revert function to work, and apparently, it doesn't work in the GSAP example either. In the tutorial video here: http://www.greensock.com/splittext/ , at the 8:21 mark Carl shows how calling function allDone() { mySplitText.revert(); } returns the animated string elements back to a single div. However, in the CopePen example at: http://codepen.io/GreenSock/pen/mvhak the same function is used but the string is not being reverted back to a single div. I am getting the same behavior in my own attempts. I can't figure out why but hopefully someone here knows. Additionally, is it possible to chain separate SplitText animations and stagger their starts? I have tried chaining a few SplitText animations into a TimelineLight but not getting this to work. Thanks so much for any info. --Kevin
  7. Hi I am trying to achieve a nice switching animation with hint for the user. <div class="messageBox"> <div class="start"> Please start by entering name of your chosen product. </div> <div class="pickup"> Perfect now pickup your item </div> <div class="selected"> Selected </div> <div class="notFound"> Nothing found, it's possible we are not having this for you yet </div> </div> Javascript code like this var transform = {opacity:0, scale:0, y:80, rotationX:180, transformOrigin:"0% 50% -50", ease:Back.easeOut}; var anim = new TimelineMax() .set(".start", {visibility: 'visible'}) .set(".pickup", {visibility: 'visible'}) .set(".selected", {visibility: 'visible'}) .set(".notFound", {visibility: 'visible'}) .staggerTo(notFoundText.chars, 1,transform , 0.001, "s") .staggerTo(selectedText.chars, 1, transform, 0.001, "s") .staggerTo(pickupText.chars, 1, transform, 0.001, "s") .staggerFrom(startTypeText.chars, 1,transform , 0.001, "s") .staggerTo(notFoundText.chars, 1, transform, 0.001, "s2") .staggerTo(selectedText.chars, 1, transform, 0.001, "s2") .staggerTo(startTypeText.chars, 1, transform, 0.001, "s2") .staggerFrom(pickupText.chars, 1, transform, 0.001, "s2") .staggerTo(notFoundText.chars, 1, transform, 0.001, "s3") .staggerTo(pickupText.chars, 1, transform, 0.001, "s3") .staggerTo(startTypeText.chars, 1, transform, 0.001, "s3") .staggerFrom(selectedText.chars, 1, transform, 0.001, "s3") .staggerTo(selectedText.chars, 1, transform, 0.001, "s4") .staggerTo(pickupText.chars, 1, transform, 0.001, "s4") .staggerTo(startTypeText.chars, 1, transform, 0.001, "s4") .staggerFrom(notFoundText.chars, 1, transform, 0.001, "s4") anim.pause() And then when step is selected anim.play(0) // or 1/2/3 setTimeout(function(){ anim.pause() },1000) I' am doing probably some really wrong here. I did set up each step to last one second, but with stagger it seems that it is more depend on sentence length... so sometimes it's less then a second, but usually more. Another problem I have is with instructing anim to play exactly one second. I could not find any api support for this, so that's why setTimeout - but this doesn't work properly of course - it's not precise I'll bet there must be some more convenient way how to achieve something similar Thx a lot for help
  8. So, I was playing around with the splitText demo, and was wondering how or if I could animate individual letters as someone types them into an input box. This is really a crappy codepen, but you should be able to see the direction i'm trying to go in. http://codepen.io/ccelestine/pen/CdieB It's sort of working the way I want, but the whole word is animating. Do you think this would be possible with a bit more work? Thanks, C
  9. Vic

    SplitText ex?

    Hi, I just signed up for the club again. I'm trying to use SplitText of #code1 ( https://github.com/shawea/blueGrass/blob/master/pri/aCDN/view/Why.html ) using this code ( line 23 https://github.com/shawea/blueGrass/blob/master/pri/aCDN/app/App.js ) When I don't split, the text shows. When I do split, it goes to one line or something, can't be seen. Is there example split text? tia,
  10. Hello, I am trying to use the SplitText plugin to animate a client testimonials section of my website: http://www.lootok.com/new/about/clients.php I'm having issues though - when I use splittext, it's removing the spaces from my text. If I use to create the spaces, the spaces, but I can't keep the words from breaking even though I have it set to split by chars,words,lines. If you look at the page the first quote shows the problem (where it splits mid-word) and the second shows the space problem (where there are no spaces between words). Any ideas?
  11. Hey Guys! I'm new to GSAP and just trying to create an animated text. I have all the libraries loaded, but still get the error below: ReferenceError: SplitText is not defined my js line is: var splittxt = new SplitText("#description"); and all my script is loaded: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script> <script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js' type='text/javascript'></script> What is it I am doing wrong? Thanks!