Jump to content

Chrysto last won the day on August 13 2014

Chrysto had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Community Answers

  1. Chrysto's post in What is the best method for scrolling text horizontally across a div was marked as the answer   
    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.