tweenmax scroller

[kempo]

I'm working on a banner using TweenMax, I want to scroll 5 divs form right to left and display 3 at a time (except right at the beginning and right at the end). It is hard to explain without looking at the result. You will see that only 2 divs are currently displayed at once.

See the Pen XdyybQ by jakepeg (@jakepeg) on CodePen

[PointC]

Hi kempo 

 

I'm not sure I completely understand your question, but my guess is that you need three stopping points in the animation so three divs can be shown at once. (except, as you said, at the beginning and end). The current problem is that you're using only one stopping point, pausing for 0.1 seconds and then animating the div off screen. My solution for you would be to use the aforementioned three stop positions and then stagger the divs. The code I used:

var tl = new TimelineMax(),
    time = 0.9, //animation time to move between positions
    thePause = 0.2; // time to wait before the next move

tl.staggerTo(".number", time, {left:200,top:50},time+thePause)
  .staggerTo(".number", time, {left:100, top:0}, time+thePause, time+thePause)
  .staggerTo(".number", time, {left:0, top:50}, time+thePause, (time+thePause)*2)  
  .staggerTo(".number", time, {left:-100, top:100}, time+thePause, (time+thePause)*3); 

Here's the CodePen:

See the Pen RaqOGJ by PointC (@PointC) on CodePen

 

Hopefully that helps a bit.

 

Happy tweening.

[kempo]

That helped a lot thank you