Odd jumping DIV in TimelineMax

[TheTinltd]

Been using the AS3 libs for years, but only just getting back into the world of HTML/JS/CSS. Last time I used HTML framesets were all the rage!

 

Trying to create something very simple. A DIV that contains 2 more inside, both the same size, one above the other. The first should scroll up out of the parent, with the second scrolling up locked to the first, then they scroll back into position and then loop indefinitely. Basically to do a promo area where 2 different pieces of content alternate.

 

The problem is I am getting an unexpected result. I have it so rolling over the content causes a pause, but not if it is actually animating, then it waits till that section is complete before pausing. If I pause the timeline during the last tween, when I resume I get an odd jump.

 

I have made a codepen here:

See the Pen wqyaH by gamingdave (@gamingdave) on CodePen

and you can trigger the unusual behaviour by rolling over the panel as its tweening back to its start position (so during the second tween). When the animation resumes the whole panel jumps position.

 

I assume it's something I am doing wrong, as I say my HTML skills a very basic at this point.

I have found another way of solving the problem (

See the Pen dIqDo by gamingdave (@gamingdave) on CodePen

) which involves tracking the progress of the whole timeline and either resuming or restarting dependant on wether the whole timeline had completed or not.

 

Is my methodology in the first example correct and should I be expecting the behaviour. Am I misunderstanding the order or scope of callbacks within JS perhaps, or is it a feature of the timeline?

 

 

[Rodrigo]

Hi Dave and welcome to the forums.

 

Yeah an infinite slider is a simple thing with TimelineMax, but when you add user events to the flow things get a little complicated.

 

I remembered a previous post that had a similar issue of unwanted behaviour, you can check it here:

http://forums.greensock.com/topic/7523-proper-way-to-stop-jump-and-start-a-timeline/

 

I checked your code but after a while I decided to give it a try myself to get it done. My only guess with your first pen is that there are many functions going around, so my intentions was to simplify it as much as possible and, so far, I think is done, the code looks like this:

var div1 = $("div#div1"),
    img1 = $("img#img1"),
    img2 = $("img#img2"),
    logDiv = $("div#logDiv"),
    pause = false,
    delayTime = 1,//standar delay time for repeat and initial play
    timerElem = {a:0},
    tl = new TimelineMax({repeat:-1, yoyo:true, onRepeat:pauseCheck, repeatDelay:delayTime, paused:true});

tl.to([img1,img2], 1, {top:-250, onComplete:pauseCheck, onReverseComplete:pauseCheck});

div1.hover(hoverIn, hoverOut);

//this function checks at every cycle if the timeline should be paused or not
function pauseCheck()
{
  logDiv.html('timeline pause is: <b>' + pause + '</b>');
  if(pause)
  {
    tl.pause();
  }
}

function hoverIn()
{
  pause = true;
}
function hoverOut()
{
  pause = false;
  tl.play();
}
setTimeout(function(){tl.play();},1000 * delayTime); 

You can see it working here:

See the Pen KvFBf by rhernando (@rhernando) on CodePen

 

Also you could check this one too:

See the Pen ydfBb by rhernando (@rhernando) on CodePen

 

I still believe that the second pen is a better approach for any type of content slider because it gives you more flexibility.

 

Hope this helps,

Cheers,

Rodrigo.