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.

Hey man, thx for reply...But i guess it's really not an option for a very huge AngularJS project, with ~40k probable elements to animate + dynamical content it will just explode client to precreate those tweens, that's exactly why i'm doing it specifically only when requested by mouseenter or some other event, it's the only way to deliver cool and complex animations without creating perfomance disaster as far as i can see here So it's not an answer for my specific case sadly. Any other advice / technique on core question?

http://codepen.io/failure13/pen/kLwda So here is my example, i extremely simplified it, so please don't judge clumsy logic, in fact it's very complicated animation framework) My issues is very simple...If you try to hover on twitter icon fast than you'll see that twitter icon color haven't reversed completely on mouse-out before mouse-over call have started from scratch. What i need is to stay in logic of Play() / Reverse() on hover, but if there is mouse-over call and tween is still reversing on current target - than it should get reversed to the end and only then get played from start so it won't loose initialized colors on first launch. Please, any help with that?

Doesn't seem to be temporary, probably it's connected to my account somehow... You can see it here again, it always happens for me, even now http://i.imgur.com/eLCHAfu.png I use nothing funky, just latest firefox + AdBlock. About discussion - yeah, i've found it before also, really great solutions, i use some sort of mix from them which fits my situation... Now i come up with working solution like here: LavkaModule.directive('lavkaCollapse', function() { return { restrict: 'A', link: function($scope, element, attrs) { var target = attrs.collapse ? element : $(attrs.target), collapsed = attrs.open || attrs.collapse ? false : true ; function opened() { t.invalidate(); TweenMax.set(target, {height: 'auto', overflow: 'visible'}); } function closed() { TweenMax.set(target, {overflow: 'hidden'}); } if (!target.data('firstBlood')) { target.data('firstBlood', true); var t = TweenMax.to(target, 0.4, { overflow: 'hidden', height: 0, marginTop: 0, marginBottom: 0, ease: Power1.easeInOut, paused: true, reversed: true, onStart: closed, onReverseComplete: opened }); if (collapsed) { t.timeScale(100); t.play(); } element.bind('click', function() { t.timeScale(1); if (t.reversed()) { t.play(); } else { t.reverse(); } }); } if (attrs.collapse) { element.unbind('click'); var collapse = attrs.collapse; $scope.$watch(collapse, function(collapse) { t.timeScale(1); if (collapse) { t.play(); } else { t.reverse(); } }); } } } }); This dirty trick here seems to do the trick with dirty initialization of collapsed state if (collapsed) { t.timeScale(100); t.play(); } But now i have another problem, it's kinda not GSAP, but angular related, since it's unversal collapse directive, a lot of times i have a situation of for example using collapsing div with ng-repeat inside it, therefore each time i have such div in collapsed state, and it's children adds or removes some content in it's dom - i must recalculate height of tween so there won't be jump or no animation... Not sure what to do really, in terms of what event to use in such case to detect changes. There are some stuff like DOMNodeInserted which ain't crossbrowser solution... So anyway, if someone who are experienced in angular will have an advise for me here - it would be awesome! Their community is really poor now :\ I guess if i could find such event (maybe something angular native even, can't seem to find it), then t.invalidate(); should do the trcik of recalc.. P.S. Again sorry for no codepen, working here 24/7, absolutely have no spare time to make it right now

So i've made a nice collapse for AngularJS, looks like that: LavkaModule.directive('collapse', function() { return { restrict: 'A', scope: { collapse: '=' }, link: function(scope, element, attrs) { var target = attrs.collapse ? element : $(attrs.target), collapsed = attrs.open || attrs.collapse ? false : true ; function opened() { t.invalidate(); TweenMax.set(target, {height: 'auto', overflow: 'visible'}); } function closed() { TweenMax.set(target, {overflow: 'hidden'}); } if (!target.data('initHeight')) { target.data('initHeight', target.height()); var t = TweenMax.to(target, 0.4, { overflow: 'hidden', height: 0, marginTop: 0, marginBottom: 0, ease: Power1.easeInOut, paused: true, reversed: true, onStart: closed, onReverseComplete: opened }); if (collapsed) { TweenMax.set(target, { overflow: 'hidden', height: 0, marginTop: 0, marginBottom: 0 }); } element.bind('click', function() { if (t.reversed()) { t.play(); } else { t.reverse(); } }); } } } }); My problem is that if i intialize it as collapsed state, on this lines: if (collapsed) { TweenMax.set(target, { overflow: 'hidden', height: 0, marginTop: 0, marginBottom: 0 }); t.play(); } Than i need to press couple of times to see opening animation without glitch.. I'm a little confused now looking at this logic, but thing is that if i initialize element as collapse, i have to say click function that it need to change direction first time, and than go eaxctly like it's now... Any ideas? P.S. Sorry, no time for codepen right now, maybe later that day i'll do it!

Wow, really?) I thought it's something more fancy! Anyway it seems there is bug on new forum, you can't write "margin-left: MINUS0.5px;" in code or quote tag, whenever you write minus it just cuts whole line to ";" Hope it will be fixed, coz it's pretty vital for some codes )

My God... It's unbelivable that i seem to find source of my problem, which was...svg antialiasing fix. svg { shape-rendering: geometricPrecision; -webkit-transform: translateZ(0.1px); -moz-transform: translateZ(0.1px); -o-transform: translateZ(0.1px); transform: translateZ(0.1px); } So it seems that each time i've run any tween which changed height dinamically it caused repaint of all SVG elements on z axis by 0.1px AGAIN! And as far as my research goes it was really all elements, not only those which are below collapsible element (which would be logical, knowing browsers reflow / repaint), but every of them on page. At least in Firefox it is very noticeable hit on perfomance. So at first i've done some body class svgAA and written my CSS like .svgAA svg, then removed this class onupdate and added it back again onComplete, this worked extremely good in terms of perfomance, but jumping all svgs each time was pretty hardcore experience visually, especially if tween is longer than 0.5 seconds... Then i thought like wtf, why not use simple margin instead? svg { margin-left: 0.5px; shape-rendering: geometricPrecision; } Seem to work very well by now! Hope this will help somebody, i've exploaded my head around this issue a lot. Of course it's compromise solution since it makes svgs crisp, but you have to keep in mind shift on 0.5px to fix it visually later. Any other solutions are welcome And i still very interested to see workflow of Show more button in docs! )) P.S. I've found that it's better to use: svg { margin-left: 0.5px; shape-rendering: geometricPrecision; } For some reason it doesn't shift svg visually, but all of them seem to have crisp lines and antialiased round edges

Hi guys! First of all great new site, looks awesome, even though a little bit lost on content sometimes, but it will come back soon i guess I just had to ask, since now i'm working on making stuff like bootstrap collapse throguh greensock (coz bootstrap's is pretty laggy) And i came across few problems....Like for example in Firefox animation of such collapse is almost twice less speed than on Chrome (but it's kinda content dependant, if you slide something like li or text it's ok, but if it's some complex structure or div which have table inside of it - it's really bad). I was trying to forse 3D and stuff like that, it doesn't seem to work very well. And then when i was just sweeping around cool new docs, i've found that you have 'Show more' button which doesn't lag anywhere, even though there are a lot of different content inside! http://greensock.com/docs/#/HTML5/GSAP/Utils/SplitText/ Could you please share the code of how you made it work so extremely good and with consistant speed around browsers?

Ok guys, i have another question, now if i do it like that with angular: html <a tmax twn="svga" href=""><div class="svg24 iStar" svg vector="i-star" clr="#6b6b6b"></div></a> JS: LavkaModule.directive('tmax', function () { return function (scope, element, attrs, children) { // colors var lavkaRed = '#A21D20', orange = '#FC6608', white = '#FFFFFF', svgDark = '#2B2B2B', svgLighter = '#4D4D4D', svgLight = '#9e9e9e' ; // svg checker svgExist = false; // svg animation hover in function svgAnimIn(time, color) { if (svg.length) { svgExist = true; fillAnim = svg.find('*[fill]'); strokeAnim = svg.find('*[stroke]'); TweenMax.to(fillAnim, time, {'fill': color, ease: Quad.easeOut}); TweenMax.to(strokeAnim, time, {'stroke': color, ease: Quad.easeOut}); } }; // svg animation hover out function svgAnimOut(time, color) { if (svgExist == true) { TweenMax.to(fillAnim, time, {'fill': color, ease: Quad.easeOut}); TweenMax.to(strokeAnim, time, {'stroke': color, ease: Quad.easeOut}); } }; switch (attrs.twn) { case 'svga': element.bind('mouseover', function (children) { svg = angular.element(this.querySelector('svg')); svgAnimIn(0.4, lavkaRed); }); element.bind('mouseout', function (children) { svgAnimOut(0.5, svgDark); }); break } } }); And let's say i have complex multi-layer colorfull js, how would i get all those colors to apply later on with mouseout (instead of svgDark)? Bad thing is - i can't create var t = TweenMax object to use .play() & .reverse(), for perfomance sake (a loooot of dinamically created objects)... So i guess i should save all the original colors to array somehow? Any idea would be appreciated! P.S. Sorry for lack of fiddle, i still burn on work here with no time)

Hey man, thank you very much, it's very cool example, even though it doesn't do what i wanted, but at least it works at all... I got one question nobody still can answer me about angular-gsap-snap. For example, what if in your example instead of p i would have something like: <ul id="cartActionPanel" class="list-inline"> <li tmax twn="li"> <a href=""> <span class="svg20 iX" svg vector="i-x" swd="3.4" bdr="#1B1B1B"></span> Clear </a> </li> <li tmax twn="li"> <a href=""> <span class="svg20 iStar" svg vector="i-star" clr="#2B2B2B"></span> Like </a> </li> <li tmax twn="li"> <a href=""> <span class="svg20 iSave" svg vector="i-save"></span> Save as </a> </li> </ul> How would i make something like $(this).find('svg') angular way in such situation? I'm googling this for ages, reading docs, but still don't understand... And if i do, how would i then make something like snapAnim = svg.find('*[fill]'); So that i can easily make tint effect with gsap using it? P.S. It seems i've found working solution, not sure it's perfectly angular way...but it works! LavkaModule.directive('tmax', function () { return function (scope, element, attrs, children) { // svg checker svgExist = false; switch (attrs.twn) { case 'li': element.bind('mouseover', function (children) { children = this.children; TweenMax.to(children, 0.4, { className: '+=hover', ease: Quad.easeOut }); svg = angular.element(this.querySelector('svg')); if (svg.length) { console.log(svg); svgExist = true; snapAnim = svg.find('*[fill]'); TweenMax.to(snapAnim, 0.4, { 'fill': '#A21D20' }); } }); element.bind('mouseout', function (children) { children = this.children; TweenMax.to(children, 1.9, { className: '-=hover', ease: Quad.easeOut }); if (svgExist == true) { TweenMax.to(snapAnim, 1.9, { 'fill': '#2B2B2B' }); } }); break } } });

Sorry, but my way actually seem to be horsecrap and doesn't work on dyanmic elements jonathan So reasonable question, what should i do then...? Instead of on() i mean