Jump to content
Search Community

Continuous news ticker

Bencius test
Moderator Tag

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

Hello, 

 

I'm creating news ticker by few PEN examples which are in this forum, and I got few problems. 

 

1. I need, that all ticker start from right side of web, not center, and when I add for example padding or margin, code crashes and ticker begins to jump and does not go fluently to the end. 

 

2. Ticker speed depends on how much li tags are in ul, is it possible to get one constant speed no matter how many li's are? 

 

Thanks for the answer.

Link to comment
Share on other sites

Hi @Bencius,

 

Yeah, the problem here is that the tween is always moving "-=50" and can overshoot that amount before resetting. The reason for the constant "-=50" is because of the need for a "constant speed" regardless of the length of the text. We can tackle that another way with some math by defining a "speed" and letting the math determine the duration of the tween. That means we can move the ticker a predefined total amount  (the width of the span) in a single tween before restarting.

 

See the Pen EMQWMw?editors=0010 by sgorneau (@sgorneau) on CodePen

 

  • Like 2
Link to comment
Share on other sites

1 hour ago, Bencius said:

One more question. Is it possible to add blur to text moving? So make it look more smoother?

 

You certainly can "blur" the text using either some layering of text-shadow .. or css filter blur(). But these don't really achieve what you're looking for which is motion blur. I'm not sure there is much to do but play with the speed variable to get something that produces more or less of what you're looking for. FWIW ... Chrome is buttery smooth, Safari is not too far off of smooth, but there is a little flicker to the text ... and Firefox it a bit jumpy with text positioning. So, each browser will present its own issues.

  • Like 2
Link to comment
Share on other sites

Sad, but blur didn't help me... There are some problems with CasparCG playout... 

 

Also I would like to ask, if it's possible to add to your script, that on sent command to html I could update content of news ticker without noticing, that something changed? I mean, if first span is shown, while ticker goes, I append to cloned span new content, and while cloned span is showed it changes hidden one? 

Link to comment
Share on other sites

Hi @Bencius,

 

You can certainly update the ticker content anytime and fire of the clone, position, duration logic for new content. But to have it update without noticing entirely depends on where the content is updated. If it's within the first visible portion of ticker, that would switch quickly at the start of the Tween and be noticed. If the affected text is outside of the visible area, then it would go unnoticed.

 

If you are going to be dealing with dynamic content, I would look at creating content containers adhoc, appending them to a timeline, and calculating their duration based on their width. And "looping" would mean circling around and appending the same content again ... not repeating the tween. It would be one long ever changing timeline full of dynamic tweens.

 

Hope this helps.

  • Like 3
Link to comment
Share on other sites

  • 3 weeks later...

Hey there, I kinda made all the stuff, but now I have bumped into a problem about updating spanWidth to make clear loop again... What should I do to that this code would get new global variable spanWidth value? 

 

var tl = new TimelineMax();
tl.to( '.ticker-wrapper' , initDuration , { x: -600,  ease: Power0.easeNone } );
tl.to( '.ticker-wrapper' , loopDuration , { x: -spanWidth-600,  ease: Power0.easeNone, repeat: -1, onRepeat : function(){checkState();}} );

 

Link to comment
Share on other sites

  • 9 months later...
10 hours ago, Bencius said:

Hello guys, is it possible to transfer this thing to Flash? I have kinda working script, but I can't get nice loop, like in HTML. Also I can't get to work ticker.fps on flash.

I'm curious why you'd want to move to Flash. It's a pretty dead technology. We haven't actively supported our Flash-based tools for many years. You're welcome to use them, of course, but I'd personally recommend being very cautious about moving your project to Flash. 

Link to comment
Share on other sites

9 hours ago, GreenSock said:

I'm curious why you'd want to move to Flash. It's a pretty dead technology. We haven't actively supported our Flash-based tools for many years. You're welcome to use them, of course, but I'd personally recommend being very cautious about moving your project to Flash. 

We didn't have fluent playback on graphic console, so thats why we thought of using flash.

Link to comment
Share on other sites

2 hours ago, Bencius said:

We didn't have fluent playback on graphic console, so thats why we thought of using flash.

Most likely that's because of either 1) the number of elements that you're animating or 2) certain animation intensive properties that you're using causing jank. If you want to create a new thread about the performance of your animations you're welcome to. Try to just include only the relevant parts of your project though.

Link to comment
Share on other sites

  • 3 months later...

Hi, a very interesting example and it came in handy for me. But I'm trying to modify it so that the creeping line could be dragged with the mouse forward and backward. Then she would again play from a new position. The problem is that when I release the mouse, the line does not update the position. Could you suggest the right decision?

Link to comment
Share on other sites

23 minutes ago, Vladlen said:

I'm trying to modify it so that the creeping line could be dragged with the mouse forward and backward. Then she would again play from a new position. The problem is that when I release the mouse, the line does not update the position. Could you suggest the right decision?

Please make a minimal demo of your setup in something like a CodePen if you'd like help. It'd likely be best to create a new thread instead of using this old one.

 

Link to comment
Share on other sites

  • 8 months later...
  • 3 weeks later...

Say I have 4 topics under 4 headings, with 5 bullet points below each one. And I would like to
1. Have a title bar that just shows the headings and
2. Below that the bullet points scroll one after another.  I may want to change the color of the BG (background) of this text box just to suggest to the viewer that the heading is different.

Example text is sent as attachment. Ignore the first two lines and start from US Politics:

Thanks in advance!

Sree Iyer
 

2020-01 Jan 29 #86 Daily Global Insights.docx

Link to comment
Share on other sites

  • 1 year later...
On 3/14/2019 at 3:03 PM, Shaun Gorneau said:

Hi @Bencius,

 

Yeah, the problem here is that the tween is always moving "-=50" and can overshoot that amount before resetting. The reason for the constant "-=50" is because of the need for a "constant speed" regardless of the length of the text. We can tackle that another way with some math by defining a "speed" and letting the math determine the duration of the tween. That means we can move the ticker a predefined total amount  (the width of the span) in a single tween before restarting.

 

 


Hi!

This code is perfect to make any changes you want.

 

 

But I can't reverse this animation. I want to move the texts from LEFT -> RIGHT.
If you change to TweenMax.set( '.ticker-wrapper' , {x: -tickerWidth } ); starts as you want but the loop isn't working as you expect.

 

I can't find any solution.

Any help?

 

Thank you!

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.
×
×
  • Create New...