Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
flash08

GSAP TweenMax news ticker - NON-Flash

Recommended Posts

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!

Link to comment
Share on other sites

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.

 

:) 

  • Like 4
Link to comment
Share on other sites

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.

 

:) 

  • Like 3
Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 1 year later...

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?

Link to comment
Share on other sites

  • Carl changed the title to GSAP TweenMax news ticker - NON-Flash

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);

 

 

  • Like 1
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.
×