I have a site where I use TimelineLite paused and manually progress the timeline with a scrollbar.
I also have 5 pauses littered throughout the timeline so that I can click a button and watch one 'scene' of the timeline.
Each animation scene basically tweens offscreen at the top while the next element tweens into the screen from the bottom.
Everything works fine.
However when I resize the browser, I notice that the tweens of the timeline are still animating from the old values.
My timeline consists of TweenLite.to(...) tweens. For example if my browser height is 700 pixels and I tween scene 1 out of view and scene 2 into view, when I resize and use timeline.reverse();, I see scene 2 tween back to 700 pixels. (Scene 2 is absolutely positioned with translateY set to 100%) However since my tween is using y: '100%' I would expect it to reverse to 100% not this old pre resize value of 700 pixels.
Oddly enough, scene 1, which was originally at 0,0 and tweened to 0,-100%, still tweens to a percent value so that one looks ok.
So I find it really odd that scene 2 is tweening in pixels when I set a percent value and scene 1 tweens in percent.
Whats going on and how do I prevent this pixel value from caching in my tween?
I've already tried invalidate(), kill(), clear() and then setting the timeline to null, followed by reinserting new tweens on a new timeline but somehow those tween values still exist.
I'm at a loss. Any help would be greatly appreciated.
Answering my own question since no correct answer exists. GSAP saves any tween data on the actual DOM element. Despite me setting the timeline or tweens to null, it had no effect because as I was tweening the same element, it would check the DOM element if it had the variables GSAP had saved prior.
To fix this I had to manually reset the DOM element variable.
If this is a problem for you, check the ._gsTransform variable on the element. You will see some x, y values that you can manually set to 0 or whatever else you need to set it to.