Search the Community

Hi Guys, Quick question. I noticed that using SplitText, if the <div> element being passed to the SplitText tool, has an image or any other tag inside, that tag is changed into an empty <div> by the SplitText tool. Is this by design?. <div class="content" id="content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non quam elementum enim tincidunt suscipit a et lacus. Nunc eros mauris, semper at pellentesque eget, pretium ut lacus. Sed in pulvinar turpis, vitae congue nisi. Mauris aliquam finibus molestie. Duis a volutpat ligula. Nullam lobortis lorem justo, ac gravida arcu mollis quis. Curabitur condimentum diam imperdiet, iaculis libero eget, tempor turpis. Phasellus neque turpis, pretium sit amet nibh ut, egestas rutrum ex. Nam sodales mollis elit ut consequat.<br> <img src="http://s.cdpn.io/16327/logo_robust.jpg" /> </div> The <img> in the code above gets replaced by an empty div. The solution I've found is wrap the text into an extra <div> element and pass that one to the SplitText, thus preserving the <img> element: <div class="content"> <div id="content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non quam elementum enim tincidunt suscipit a et lacus. Nunc eros mauris, semper at pellentesque eget, pretium ut lacus. Sed in pulvinar turpis, vitae congue nisi. Mauris aliquam finibus molestie. Duis a volutpat ligula. Nullam lobortis lorem justo, ac gravida arcu mollis quis. Curabitur condimentum diam imperdiet, iaculis libero eget, tempor turpis. Phasellus neque turpis, pretium sit amet nibh ut, egestas rutrum ex. Nam sodales mollis elit ut consequat. </div> <img src="http://s.cdpn.io/16327/logo_robust.jpg" /> </div> Thanks, Rodrigo.

Hello! I noticed that if I use SplitText on a div containing text, and that div has a class defining a font, than Splittext will fail in creating the lines array, making an array of lines that is pretty much wrong: the lines are always too long or too short, never correct. I've made a small example in codepen up there: can you tell me if I'm doing something wrong? Cheers! Alex

I'd like to use greensock SplitText plugin in an offline html5 phonegap applciation, as you need to have a membership to use this plugin how does that work with offline applications?

Hi, I would like to update parameter from a timline created with splitText plugin. I'd like my h1 to appear from bottom on load (and scroll to the top) and disappear to top. My idea was to change a variable (decalTxt) As you can see I use reverse() but I would like to change my y position. I can't find an issue and I'm getting mad !

I don't actually need this functionality but since it's clearly a bug I thought it's worth reporting. Having a '<br>' string when using splittext chars animations, will turn it into '{{LT}}br>'. http://codepen.io/patrickklug/pen/wFkbL

I'm using SplitText (see below) - I'm using a script font from Google Fonts & some characters get cut off (on the left side). Parts of their shapes are sometimes below the character before & then this happens. I've tried to apply a class called words that set the overflow to visible but that didn't help. overflow: visible; This is happening in IE & Chrome during animation - but then as soon as the animations stops it shows the complete letter. No cut off letters in Firefox & Opera. In Safari the cut off letters remains cut off even after animation. Anyone have an idea how to solve this? Niklas //split greetings txt into words var split = new SplitText("#greetingsTxt", {type:"words", wordsClass:"words"}); //create a TimelineLite instance - animation var tl = new TimelineLite({paused:true, delay:1}); tl.from("#firtreeBells", 0.6, {top:"35%", autoAlpha:"0"}); tl.staggerFrom(split.words, 0.4, {y:-20, autoAlpha:0}, 0.1); tl.from("#logo", 0.6, {bottom:"15%", autoAlpha:"0"}, "-=0.2"); window.onload = function() { tl.play(); };

I stumbled upon another oddity when using splittext on a text with line breaks: <div class="test1">This results <br>in six words.</div> results in six words and one linebreak. <div class="test2">This results <br>in seven words.</div> results in seven words (one of which is empty) and what looks like two linebreaks. The difference between test1 and test2 is that the second one has two spaces before the linebreak. Since a space is normally not treated as a word, this seems like a bug to me. Multiple spaces should be treated the same as a single space. Demo here: http://codepen.io/patrickklug/pen/wFkbL

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?

When reverting a SplitText operation any trailing line breaks are removed from the text, causing a different result: http://codepen.io/patrickklug/pen/Deiba

I am trying to color some text within SplitText, but it doesn't get red (rood). Is it SplitText or just me again.

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

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

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

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

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

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,

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?

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!