SigSam

Not the issue I'm having but the other animations don't work with changing the className? http://codepen.io/anon/pen/QwZvZj

I'm just amazed you even made a video, but definitely helped try bring some context to the issue, but I'll have to get a demo over. I've managed to ease some of it's wild className death throes. Could you link to that codepen you used in the video? I think it maybe struggling with applying/removing classes to the same element at the same time. The weird starting className changing seems eased by: timeline.set(doc, {css:{className:'-=menu-active'},immediateRender: false}, 0); timeline.set(doc, {css:{className:'+=page-visible'}, immediateRender: true});

Sorry that's just a pen I was using to try and quickly recreate the bug as it maybe because of the nested timelines. The classes are added and removed at when they should be but then also they do it when they shouldn't, and I was trying to make a reduced case without spending too much time on it. For some reason at the very start it reapplies classes that GSAP hasn't even been given, but was previously on the element. Does GSAP store the classes then reapply them or something similar? I've got it working for now, but still has it's quirks so I will return to it on refactoring and see if I can make a proper reduced case. Thanks for your help guys. Hopefully will write an article eventually on the way I'm using GSAP once everything is correct. I love being able to nest timelines.

I'm trying to, but it's working in the example, yet in my version it seems to reapply the final classes, once it's rolled back over the start and the onComplete and onStart events don't refire so can't use those. There's gotta be something http://codepen.io/anon/pen/Jomdmv

I'm struggling to apply and remove classes. This is the final scene on a timeline and you can scroll up and down which scrubs the paused timeline. I don't know if i'm using it correctly. I've also tried with .to but I don't want it to try and handle the animation, just changing classes. This works almost as desired, when returning, the class is removed, but only temporarily (until the next previous slide) and then the class is unexpectedly added back. menuReturn: function() { var doc = document.documentElement; var scene = new TimelineLite(); scene .add("start", 0) .add("end", 5); scene .set(doc, { css: { className: '-=menu-active' } }, "start") .set(doc, { css: { className: '+=menu-active' } }, "end") return scene; } Had great help here last time, so thanks in advance!

Thanks for all of your help. I've been loving GSAP and it's handling of multiple timelines. As i had scenes (timelines) within the main story (timeline), I just had to check in the loop if they weren't null. The final result: var targets = story.getChildren(); story.kill(); for (var i=0; i<targets.length; i++) { if (targets[i].target != null) { TweenLite.set(targets[i].target, {clearProps:"all"}); } }

I'm wanting to be able to destroy a timeline (based on resizing). When i destroy the timeline, i want to remove all of it's initial set-up CSS. Here is how a timeline is set-up: var scene = new TimelineLite(); scene .add("start", 0); scene .from(panel, 20, { opacity: 0 }, "start") .from(panelText, 20, { y: "+=60px" }, "start") .from(background, 20, { scale: "1.15" }, "start") With this, the panel is set to Opacity 0 initially. I have timelines within timelines as each panel (17 of them) animate in various combinations. I don't want the timeline active on mobile so i can disable it, but is there a method like clearProps for removing all CSS generated by all the timelines? Or must this be done outside of GSAP? The codepen attached (i got from the closest post i could find relating to this issue) demonstrates it resetting to the start, but the elements still have their CSS properties.