pl en en en en en en en en en en en en en en en fa en en fr hbs_lat en en en es en en en ms en de en fr en en en ca en en en en en en en de de en en fr en en en en en en en en pl en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en ca en en en en en en ca en en en de en lt en nl en it en fr en eu en pt en en en en en de en en en en en en en fr cv es tr es en en en en ms en en en en en en fr en hbs_lat en en en en en en en fr cv es tr es en en en en de en en en ca en en en en en
SigSam replied to SigSam's topic in GSAP
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
SigSam posted a topic in GSAP
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!
SigSam replied to SigSam's topic in GSAP
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"}); } }
SigSam posted a topic in GSAP
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.
“GSAP, the rolls-royce of JS animation frameworks. Still going strong!”
“GSAP has been absolutely the best experience for me as a newbie. The people in this community take serious time to help you with upcoming issues on real life projects like I've never experienced before.”
“I was astonished by the speed and versatility of animating with GSAP.”
“GreenSock is the best thing that happened to SVG animations since SVG animations.”
“Sincerely, the people behind GSAP are sorcerers”
“Massive shoutout to GreenSock for having an amazing product with fantastic documentation, hugely talented support staff and an active and helpful community. If you do anything with web animation you should *definitely* be using them.”
“I am more and more amazed every day, and very glad that I decided to get a business license.”
“Without GSAP I would have ditched front-end dev the day Flash officially died.”
“I can definitely say ever since I started using GSAP, my work exponentially improved. It basically changed my life.”
Sign Up For Our Newsletter
Get the latest updates on GreenSock products, exclusive offers, and more right in your inbox.
Your information will always be kept confidential.
Thanks for signing up!
Now you'll begin receiving the latest GreenSock updates, exclusive offers, and more right in your inbox. Welcome aboard.