Hi,
We're using TimelineMax and TweenMax to make a scrollable timeline animation. Everything is going great except when leave the tab open and navigate away to another tab, which causes chrome to (I'm not sure on this one) suspend or slow down timers from 'ticking'. When you navigate back to the tab, we're seeing erratic behavior that will show random pieces of our timeline all stacked up on top of each other (http://screencast.com/t/vC00sJHXCkCT).
I've tried to use https://github.com/ai/visibility.js to set the timeline progress to zero whenever a user activates the tab again, but the behavior still exists.
Steps to create:
1. go to http://alert-gum.herokuapp.com/ in chrome/firefox
2. scroll down a little bit
3. open a new tab in front of the alert tab and wait for 3 mins
4. go back to the tab and try scrolling.
result: items scattered and stacked on top of each other from different points in the timeline.
p.s. the issue 'kind of' fixes it's self if you scroll all the way up and all the way down (obviously not satisfactory)
Thanks for any help.
