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

[raugert]

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,

Richard

[PointC]

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:

 

https://greensock.com/forums/topic/13306-gsap-tweenmax-news-ticker-non-flash/

 

Here are a couple of pens:

 

Jonathan's

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

 

Diaco's

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:

 

https://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

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.

[raugert]

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. 

 

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

 

thanks again.

[PointC]

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.