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: http://codepen.io/gamingdave/pen/wqyaH 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 (http://codepen.io/gamingdave/pen/dIqDo) 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?