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

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.

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

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!

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

 

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

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
Link to post
Share on other sites

Hello everyone! First post here on the forums! I'm eager to learn how to tween. Thank you to everyone for your responses above...I've been learning from each one.

In particular, I'm looking to execute something close to the codepen example @pkid shared initially but I'm running into a problem with increasing the text size (48pt in this case). The clone text begins to appear below the original line and I'm thinking it has something to do with the listWidth. Additionally, the list items begin to have a large gap between them after changing other values. After trying different listWidth values related to variety of possible elements I can't seem to get it to work and I would love your help in a) a solution and b) an explanation on how it's functioning. I appreciate your help!

Please let me know if something is not clear or if you have any questions.

Thanks,
Matthew

Link to post
Share on other sites

Hey @ares1010 and welcome to the GreenSock forums. If you'd like our help debugging please make a minimal demo of the issue and create a new thread for your question :) 

 

Link to post
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.

×