Jump to content
GreenSock

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

What is the best method for scrolling text horizontally across a div

Recommended Posts

I am trying to replace a jQuery plugin called "li-scroller" which combines the <li> tags from an unstructured list and scrolls the items inside a div one after another from left to right indefinately.  Unfortunately the plugin distorts the letters slightly as the speed increases and I was hoping that Greensock would produce a more fluid result.

 

Since I am new to Greensock, I am not sure which approach to take to accomplish this.  Is Split Text necessary or would a method using Split Text produce smoother results than the alternative?  Any guidance or examples to help get me started is appreciated.  When I get something to work, I will post it to CodePen.  Below is a list of some of the features I am trying to incorporate:

  1. Start at right of div, fade in letters and scroll from left to right.
  2. At left of div, letters fade out of display.
  3. First list item starts right after last list item without break in list.  List repeats indefinately.
  4. Mouseover list causes the list scroll to pause.

Seems simple enough but I have no clue how to tackle this.

 

Thanks,

James

Share this post


Link to post
Share on other sites

Hi and welcome to the GreenSock forums.

 

Can you please provide a link to an example that uses the jQuery plugin you are trying to replicate? I did a quick google search, got lots of results, and couldn't find an example that works exactly like you describe.

 

Also, please keep in mind that we will do our best to help you understand how the GreenSock API works and how to use it, but we can't always build out complete and complex demos that require lots of code outside the GSAP API.

Share this post


Link to post
Share on other sites

Hi and welcome to forums;

 

The first thing that comes to mind ( easy, but not very optimised ) is to clone the list, and animate the original list and it's clone via TimelineMax. Then, on hover to pause and play the timeline. Here is simple demo: 

See the Pen tEarb by bassta (@bassta) on CodePen

 

Here is the JS ( jQuery must be included );

var $holder = $(".holder");
var $list = $holder.find("ul.list");
var $clonedList = $list.clone();

var listWidth = $list.find("li").length * 200;
var endPos = $holder.width() - listWidth;

$list.add($clonedList).css({
	"width" : listWidth + "px"
});

$clonedList.addClass("cloned").appendTo($holder);

//TimelineMax
var infinite = new TimelineMax({repeat: -1, paused: false});
var time = 5;

infinite.fromTo($list, time, {left:0}, {left: -listWidth, ease: Linear.easeNone}, 0);
infinite.fromTo($clonedList, time, {left:listWidth}, {left:0, ease: Linear.easeNone}, 0);
infinite.set($list, {left: listWidth});
infinite.to($clonedList, time, {left: -listWidth, ease: Linear.easeNone}, time);
infinite.to($list, time, {left: 0, ease: Linear.easeNone}, time);

//Pause/Play
				
$holder.on("mouseenter", function(){
	infinite.pause();
}).on("mouseleave", function(){
	infinite.play();
});

//Show/Hide overflow - this is to see how it works, not needed actually
$("#ov").on("click", function(){
	$holder.removeClass("hide-overflow");
});

$("#oh").on("click", function(){
	$holder.addClass("hide-overflow");
});

If some part of the code confuses you, I suggest you to first read the documentation of TimelineMax.

  • Like 2

Share this post


Link to post
Share on other sites

Thanks, I searched for an example but did not come across the one you linked.  As for the link to the jQuery program, Li-Scroller can be obtained through the following link:

 

http://www.gcmingati.net/wordpress/wp-content/lab/jquery/newsticker/jq-liscroll/scrollanimate.html

 

This link also has several demos embedded so you can see the slight jitter/flicker I am talking about.  I plan on looking at you link this Saturday.  I will post my results on Codepen by the end of the weekend.

 

If anyone else has an alternative idea, please post a repsonse and I will include your comments in my tests this weekend and use it as a comparison.

 

Thanks,

James

Share this post


Link to post
Share on other sites

Hello everyone,

 

Does anyone have a solution for having three different strips scrolling at different directions and with varying offsets so that they are completely unsynchronised?

 

Here is a pen expanding on Chrysto's above which is closer to what I want to achieve stylistically:

 

See the Pen yGueb by hackfin (@hackfin) on CodePen

 

Thanks!

Share this post


Link to post
Share on other sites

I have managed to add more strips through the suggestion here. Yet I am lost as to how I can make a variation between the three so that they scroll in different directions and with different offsets. Suggestions anyone?

 

Here is the pen:

 

See the Pen KKwvrxb by pkid (@pkid) on CodePen

 

Share this post


Link to post
Share on other sites

@pkid You just have to modify the sign of the x values based on the direction that you want it to go and also change the duration based on the speed that you want. Do this after the setup but before the animation:

var mod = 1;
if(ix === 1) {
  mod = -1;
} else if(ix === 2) {
  mod = 1.7;
}
listWidth = mod > 0 ? listWidth : -listWidth;

var time = 10 / Math.abs(mod);

See the Pen OJPxPQr?editors=0010 by GreenSock (@GreenSock) on CodePen

  • Thanks 1

Share this post


Link to post
Share on other sites

Hello again everyone!

 

I have managed to come up with what I have at the pen below. 

 

Somehow I am having difficulty with making them scroll in the opposite direction and the cloned list is not aligning perfectly with the original list. Any help with explaining what I am doing wrong would be much appreciated.

 

Thanks!

See the Pen WNbZrEB by pkid (@pkid) on CodePen

Share this post


Link to post
Share on other sites
17 minutes ago, pkid said:

I am having difficulty with making them scroll in the opposite direction

You have to change the mod values to ones that you want, the ones I made are just for example. 

See the Pen KKwXVBw?editors=0010 by GreenSock (@GreenSock) on CodePen

 

It would be good for you to take a few minutes and try to understand my approach. I'm happy to help.

  • Like 1
  • Thanks 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×