Search the Community

My current project (JavaScript/GSAP) needs lots of tweening on different elements at the same time (it will be a heavily tweened/animated site). In "lots of" I mean 50-75 "TweenLite.to"s per click event, in total about 150-300 css properties to tween. It would be used all over the site on elements (buttons, menus, forms). Most of the elements will have 2 states, an "active" and an "inactive" state, basically when the user clicks on a menu, the menu will be activate, click again/elsewhere and goes to inactive. To efficiently manage the tweens, I would like to use TimelineLite, create all the tweens after the site loads and store them in 2 TimelineLite instances avoiding the "TweenLite.to"s again and again on each event/state change. - the "activateTimeline" and "inactiveTimeline" look like like this: var activeTimeline = new TimelineLite({ paused: true, tweens: [ ...an then lots of tweens with "new TweenLite(...)"s... ] }); var inactiveTimeline = new TimelineLite({ paused: true, tweens: [ ...an then lots of tweens again with "new TweenLite(...)"... ] }); This works really well. But there is a serious problem. When the user clicks rapidly or programatically change states BEFORE the finish ("onComplete") of the ongoing timeline, jumps and slowdowns will occur. This is not the case, when using "TweenLite.to"s on every event over and over again as the TweenLite system will override values and nicely finishes off tweens as naturally would be expected. I have tried to use some conditions to somehow kill/invalidate the ongoing "old" timeline the let the "new" timeline on state change finish nicely as I would expect, also when starting over the timeline again: function activate() { if( !active ) { var activeProgress = headerTimelineActive.progress(); var inactiveProgress = headerTimelineInactive.progress(); // sometimes, on very rapid clicking/programatical state changes, mostly the headerTimelineActive.progress() will give a NaN if( isNaN(activeProgress) || isNaN(inactiveProgress) ) { reinitializeTweens(); activeProgress = headerTimelineActive.progress(); inactiveProgress = headerTimelineInactive.progress(); } if( inactiveProgress > 0 && inactiveProgress < 1 ) { headerTimelineInactive.kill(); } if( activeProgress > 0 ) { headerTimelineActive.pause(0, true); } headerTimelineActive.play(); active = !active; } }; function deactivate() { if( active ) { var activeProgress = headerTimelineActive.progress(); var inactiveProgress = headerTimelineInactive.progress(); if( isNaN(activeProgress) || isNaN(inactiveProgress) ) { reinitializeTweens(); activeProgress = headerTimelineActive.progress(); inactiveProgress = headerTimelineInactive.progress(); } if( activeProgress > 0 && activeProgress < 1 ) { headerTimelineActive.kill(); } if( inactiveProgress > 0 ) { headerTimelineInactive.pause(0, true); } headerTimelineInactive.play(); active = !active; } }; ...but these methods did not help. Again, on rapid clicking/programatically state changes/click before the actual timeline "onComplete"s jumping, jittering and some sort of race/concurrent conditions occur. Here is a small CodePen demo. Please, give me some advice on what should I do/how should I do to use 2 "TimelineLite"s as I described and on state changes, somehow stop the "old" timeline and let the "new" timeline go. I wolud like to get the same effects/tweening experiences, when using just "TweenLite.to"s again and again (as the TweenLite system will override values and nicely finishes off tweens as naturally would be expected), but with 2 "TimelineLite"s. If I can get this to work with 2 timelines, there will be menus, when a 3rd state will be introduced, a "disabled" state with a 3rd TimelineLite. But currently, I am not able to do, what I wolud like to do with 2 timelines as I described. Thank you in advance, thank you all!