GSAP TweenMax news ticker - NON-Flash

[flash08 0 Likes (Newbie)]

I need to do a small "news ticker" type animation - it would just consist of text scrolling along a single line. I spent a considerable amont of time looking around for somethig like this, and all of the references I found were either old Flash-based things, or jQuery code that is many years old.

 

Is there a simple way to use Tweenmax to create a horizontal text scroller?  Ideally, I'd like it to just use a bunch of <li> elements as sequential text scrolls.

 

TIA!

[PointC 8,599 Likes (Superhero)]

Hi flash08 

 

 

The amazing Jonathan has a CodePen doing just what you need:

 

See the Pen vDhKE?editors=001 by jonathan (@jonathan) on CodePen

 

Happy tweening.

[Diaco 1,948 Likes (Superhero)]

Hi flash08 

 

pls check this out : 

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

[PointC 8,599 Likes (Superhero)]

Hey Diaco - awesome as always.

 

That's really cool that it only has 3 lines of JavaScript.

 

I look at some of your pens and think "It can't possibly be that easy" , but there it is working beautifully every time.

 

 

[PointC 8,599 Likes (Superhero)]

PS - @flash08

 

When you read these answers, you should also read this thread:

 

http://greensock.com/forums/topic/10357-text-news-ticker-animation-is-not-smooth/

 

It has a good discussion of getting the ticker to run smoothly in all browsers. In particular, you'll see Jonathan has set the z rotation on his pen to 0.01 to help with this.

 

 

[flash08 0 Likes (Newbie)]

Thanks to all! I am just AMAZED at what GSAP can do!

[Art_Maverick 0 Likes (Newbie)]

Hello.  Lurking and learning GSAP.  Diaco has a codepen earlier in this thread which I've been toying with.  How do you slow it down?  Do you use the timescale?

[Carl 9,066 Likes (Superhero)]

You could change the duration by changing the 30 into 60.

Once the tween is created you can change the duration() or timeScale() but you need to create a reference to the tween like:

 

var t = TweenMax.to('.topics',30,{x:-topics.offsetWidth,repeat:-1,ease:Linear.easeNone});
t.timeScale(0.5)

//or
//t.duration(60);