Search the Community

Hi. I am new to gsap and like to reproduce the simplest splitText Example from the SpitText Introducing Video: http://greensock.com/SplitText This runs in codepen http://codepen.io/anon/pen/LVrzxN?editors=101 But not on my local machine. Why not? The SplitText.min.js File is loaded local. An thats what it looks like in Chrome.

Hi, I've been playing with your cursor demo and trying to incorporate it into a TimelineMax (just to get me started as I'm new to all of this). I'm seeing some random delay though in between the cursor stopping blinking, and the text actually being typed and I can't narrow down where it's coming from as it doesn't seem to happen in the original Codepen (although there were some errors in that for some reason!) In addition to that, Chrome is getting a lot of the following messages, these happen at the same time as the delay so I've obviously got something mixed up. invalid top tween value: NaN Does anyone have any ideas as to the cause of the delay and the errors? I've forked the original Codepen, and then recreated the delay by copying my code back in http://codepen.io/padders1980/pen/YXeMYN

Is there a way to use superscript with SplitText?

The issue: When replaying the SplitText animation, some of the letters on the right are not starting the animation straight away. Instead of sliding in as they are supposed to, they are already positioned and only start the animation from there. This doesn't happen when the animation plays for the first time, only when revisiting the first slide after paging through the other slides. This happens in Firefox, Opera and IE latest version.

It would be nice, if there is an option to supply for word delimiter. For example following text is in tibetan "རེས་གཟའ་སྤེན་པའི་ཉིན" It composes of multibyte unicode characters and it has a word delimiter char '་' instead of blanks as in latin chars.

Hi, I am working on building a signage app where content is played in loops. I.e. some animation is played then hidden then another animation is played and once through the loop it all restarts again. If I call splitText() in each loop what happens to the many instances that are created? Do they get cleaned up or do I have to do this? Is there a way I can monitor the memory to see what happens?

Hi, are there any issues when using SplitText with Unicode characters? Thanks.

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!