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 comment
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 comment
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 comment
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 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.
×