Jump to content


Odd jumping DIV in TimelineMax

Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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?



Link to comment
Share on other sites

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:



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>');

function hoverIn()
  pause = true;
function hoverOut()
  pause = false;
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,



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.