failure13

Yeah i guess it's an answer, thx, just hoped there would be some easier quickfix for now, since i have pretty many projects right now, which based on ny wip css-js framework based on Bootstrap (haven't messed with js too much now, but i'll sure as hell rewrite everything with gsap-integration in mind). And i guess i understood about empty also, just thought at the first place that if you for example do: 1. addClass('hover') and addClass('active') simultaniously (it will sure as hell at least pick one of them and won't leave just empty class, i ain't even talking here about visual part, just classes applied) is kinda equal to 2. GSAP className: '+=hover' and addClass('active') But thinking about seek(), reverse() and other cool stuff like that - it's kinda logical it's not same as first scenario, definately. DOM-browser rendering game ain't changing at all since XX century :/ We're doomed P.S. Or you can just call TweenLite.killTweensOf(element) before you set the class to active. - this ain't working in my case though)

Great explanation, tight community and all. Though i've read it a lot already through different other topics and understand why it happens, there's really no point to show css specifity for me... I still have question Jack: why and how can it be that *empty* sometimes can prioritize over any js addClass, classList (active, hover and other possible additional class), only when using gsap className in food-chain? And still it's a shame. I can't agree with option 1, and certainly not with option 2, perfomance is must.) Because it's huge part of my workflow, i don't want to use css animations at all, they're more buggy than anything you've ever done + i have to consider all crossbrowser crap and write same line multiple times (preprocessors won't help you to save this space, since they'll output final css anyway) and most of all - i want to abstract how it looks from how it behave i guess you can't really argue on why i want to do so) Ok...Let me try to ask differently, is there any way to reliably prioritize js active over js hover? (ex 0 timeouts or stuff like that).

I can't do that, for obvious reasons http://codepen.io/failure13/pen/YwMGYb 1. If you have a lot of styles in realcase framework + custom code scenario (unlike this case), just "hover" applies not all of them. 2. Actually it doesn't really work in my example with hover and active states Leaving border ain't really an options since i'm talking about a lot of stuff in actual real-life classes)( Any suggestions? P.S. I perfectly understand that they collide and stuff, i could even understand why by design className can have multiple active classes at once, but when it comes to delete both hover and active classes - i'm out, that seems like bug, not feature to me

Here's reduced example, just try to hover or activate tabs and surely it will break (either no active class will be applied, or multiple ones simultaneously). And then you can just comment GSAP's js - it will work. Happens only with className, doesn't matter actually in which circumstances, Bootstrap or vanilla js, using addClass or classList to apply active class - doesn't really matter, they just collide with Greensock's className. Have seen this bug ALOT over past years, but always thought that it will get fixed by magic with newer versions... I think it's time to fix this guys)

Thx Carl, i just new you still have some rabbits in hat left! But what about future, do you have some plans to emulate 3d-transform for SVG nodes using some supported values like skew, scale etc?

Since v1.16.1 all tweens that i had on my project, which have been animating svg nodes children now off, why? P.S. Well i kinda can guess, knowing svg specs, but still, ain't there any workaround to that? Coz it worked pretty much everywhere except iOS 7 and less...

Oh, so it seems that right way is to use global group for mask! Awesome Carl, thx!)

Need quick help, i've made svg through illustrator which uses circle mask on top of everything inside scene: http://codepen.io/failure13/pen/eNpdJE But when i animate tree it gets out of mask bounds unmasked, is there anything i missed?)

Invalidate sadly ain't works in my case, coz if i do restart it cause visual changes, my goal is to update those starting values but vithout any visual side-effects or jumps (it should always stay collapsed, before i really want to open it) Can you please show some very simple example how can i do it without visually affecting tween? I always thought that set of kill methods used for just basically null existing TweenMax object completely Hmmm...Not really understood what you mean here! Again, some simple example? P.S. Sorry i just can't build any reduced pen of my context....But to emulate my event at which i need to update those values, you can juse use timer with 1000 for example

Sorry for no context, it's just really hard now to make something. Well i try to form my question as simple and straight as i can. Let's say i have created tween like that: target.t = TweenMax.to(target, 0.4, { overflow: 'hidden', height: initRow, marginTop: 0, marginBottom: 0, ease: Power1.easeInOut, paused: true, reversed: true, onStart: closed, onReverseComplete: opened }); So at first let's say it was div with height: 2000px, then it gets collapsed by this tween, but what i need now is. To re-check this starting value (by some event that i have), and update it if it's changed (without restarting / visually affecting tween). Or just update it by demands, in other words! Hope it ain't too clumsy. Any thoughts or some native functions that i don't know about?

Oh sorry) Well, your pen for example, well even my first, doesn't matter http://codepen.io/jonathan/pen/xFjDg I at first i'm passing var red = '#A21D20'; as default color for svgAnim function, then i create: object.svgTintHover = new TimelineLite({paused: true, overwrite: 'none'}); object.svgTintHover.to(aTarget.fill, time, {'fill': color, ease: Quad.easeOut}) .to(aTarget.stroke, time, {'stroke': color, ease: Quad.easeOut}, 0); but if then i'd do something like: case 'iTwitter': console.log(color); color = '#00ABF0'; console.log(color); break It will output: 21:46:05.256 "#A21D20" 21:46:05.256 "#00ABF0" But tween would actually use first value when i do object.svgTint.play(); Just don't really understand why in this case color = something; doesn't work and object.color = something works..

Awesome! But why in previous case TimeineLite have no reaction for global var change? Just wonder) When it get created it starts to orient & react only for changes of vars from where it have been created?

Jonathan Excellent!!! Works awesome man! Guys, thank you so much for help, that was extremely stupid logical problem after all)) But i guess only people who doesn't have such kind of stuff are those who doesn't work at all! Thanks again Oh yeah, one more question, why i can't just: case 'iTwitter': color = "00ABF0" break instead of case 'iTwitter': object.svgTintHover.to(aTarget.fill, 0.4, {'fill': '#00ABF0', ease: Quad.easeOut}, 0) .to(aTarget.stroke, 0.4, {'stroke': '#00ABF0', ease: Quad.easeOut}, 0); break Do i need something like invalidate maybe? Just feeling it's not the best practice here to create whole new tween in my basic TimeLine chain just to change color (for this particular case of use)...

Cool man, it works! But only for one... If i add another target you would get such effect: http://codepen.io/failure13/pen/fsdzG That they both have common tweeen... Is there any way to maybe do something like create TimelineLite for this (though angular seem to have element instead of this, and it gets me confused a lot of times of how to get similar effect like usual this) and then check somehow if this have instance of TimelineLite?

Well, that's exactly what i was trying to do for whole day, can you please fork my codepen and give example of how to apropriately do this so that you can't trick it with fast hover in-outs? I was trying stuff like if (isActive()), if (!paused()), if (reversed()) etc, they all seem to fail, maybe i was doing something wrong.