I'm loving the GSAP library so far. Nice work! The problem I've just come up against is in determining the best way to structure my tweens and timelines given what I want to do.
Essentially, I have a table which contains rows that are not all visible. After pausing for 5 seconds, the table will start scrolling until it reaches the bottom, at which point it will wait another 5 seconds before taking 2 seconds to scroll back to the top. This is achieved by simply altering the top margin, and uses two tweens that are added to the same timeline. It works perfectly.
The problem is that I have added event handlers so that a user can use their mouse or finger to swipe the table up or down. When it does so, the main timeline will be paused and a new timeline gets created to handle the swipe. This will, of course, put the main timeline out of sync once it resumes, and the table will jump when the main timeline resumes. I want it to continue scrolling from its current position, not from the position in the main timeline.
I thought to use the progress method to set the main timeline to the appropriate spot by dividing the top margin by the total scroll height, but the position still jumps when the main timelines resumes. I'm assuming the reason it doesn't work is because this calculation of progress doesn't account for the second tween that is responsible for scrolling back to the top. However, even if i remove the second tween, it still doesn't work.
Here's a CodePen to illustrate - http://codepen.io/anon/pen/ulozm
I'm wondering if there is a better way for me to structure this (perhaps using the same timeline for all tweens?) that would prevent the table from jumping?
Thx.