Jump to content


Can I use SplitText to scroll a news style ticker on a single line

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi, I'm new at Greensock but very impressed with what it can do !   I'm also fairly new at coding but I catch on quick.


I'm trying to create a news style ticker for a Telethon using GSAP. Here's what I've tried :


I read a small .csv file into a <div> called "scrolltext" 


Then I use simple TimelineLite and SplitText commands:


tl = new TimelineLite(),

    Split = new SplitText("#scrolltext", {type:"lines", linesClass:"scroll"}),
    lines = Split.lines; 


tl.staggerTo(lines, 10, {x:-1920}, 2)


This works...   but scrolls each line of text at the vertical position of each child element that it created with SplitText. Is there a way to scroll all the child elements on the same line for the news ticker ? Do I have to change the DOM child elements properties somehow,  or can it be done using GSAP ?


thanks for your help,


Link to comment
Share on other sites

Hi raugert :)


Welcome to the GreenSock forum and thank you for joining Club GreenSock.


I'm not sure I'd use SplitText to break everything up before horizontal scrolling. I'm not saying you can't, but wondering why it's necessary. I'm assuming the goal is to have one long repeating string of text?


We've had a few discussions about news tickers. Here's a good one:




Here are a couple of pens:



See the Pen vDhKE by jonathan (@jonathan) on CodePen



See the Pen MKgrKr by MAW (@MAW) on CodePen


If you need additional help or have other questions, could you provide us with a CodePen demo please? Here's some info about that:




To use Club pens on CodePen, you need to link to the special 'CodePen only' versions. Here's a GreenSock pen with those links.


See the Pen OPqpRJ by GreenSock (@GreenSock) on CodePen


Hopefully that helps. 


Happy tweening and welcome aboard.


  • Like 1
Link to comment
Share on other sites

Thanks for the quick reply PointC.


You're right, SplitText is probably not the right tool for the news ticker. I've done it just by using TweenMax and scrolling the single element containing the html.text string which also includes images. It works well that way,  but I thought I would use SplitText to parse out the lines and images.


I could then potentially add some animations to the embedded images or change the text properties of each line if I wanted to. It's really not necessary at all , but I thought I would play around with it. I'll stay focused on the simple ticker for now.  I just got a little excited when I saw what SplitText could do.  :-P


I've never used codePen before, but I will start using it to illustrate next time. 


thanks again.

  • Like 1
Link to comment
Share on other sites

Happy to help and I'm glad you've got it working. :)


I understand the enthusiasm about SplitText. It is pretty incredible. If you do want to use that, you can control the new pieces pretty easily. If you open the inspector after the split, you'll see what SplitText is doing under the hood. Your original text parent container is there, but now there will be a whole bunch of child divs. (containing your characters, words & lines). You can even add a new incremented class to the divs and then target those classes. The level of control is pretty amazing.


Have fun & happy tweening.


  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.