bawwb

holy crap, wow. this is great to hear! i understood the challenge of this, and i was rackin my own brain on thinking of a good solution and not a work around, but you already nailed it in your next rev. seriously, you guys are on point, it's amazing.

ah nice, thanks guys. both your solutions are similar and work as a good work around. i did end up just parsing through the document.styleSheet and finding the class properties that way. then tween the element using property values from that initial parse. but i think your solutions are nice since and i will use it in the future. i like that you are only creating the single tween and re-using it. only issue i can see with it is an easeOut becomes an easeIn in reverse. which in many cases might not be desirable. but i'm sure there is a way to change the ease property on the tween right before you call reverse()? thanks for the help guys.

thanks carl. oh well, that's a bummer, but i think i'm going to have to go that route. i'm building a html component and some tweenable properties should be changeable depending on design. so the reason i was trying to use css classes is because i was hoping to expose the property in css so whoever uses the component won't have to crack open any javascript. so the solution i think i'm going to have to go with is parsing through the document.styleSheets inside my javascript class and getting the property values of the class. that way so i can do as you suggested and tween the element using specific properties. thanks for the response!

i was trying to use the className property on TweenLite to add and remove a css class from an element during mouse over an mouse out. using jquery, i had done something like this: this.$container.hover( function( evt ) { TweenLite.to( _this.$content, 0.5, { className: "+=open", ease: Expo.easeInOut }); }, function( evt ) { TweenLite.to( _this.$content, 0.5, { className: "-=open", ease: Expo.easeInOut }); }); the problem i'm having is when i interrupt the animation with another mouse event that will cause it to remove the class before the animation is finnished, it seems the class name doesnt actually become added onto the element until after the animation is complete. so if you hover in and hover out before the animation completes, there wont be any class name to remove and the tween for removing the class will be ignored. i hope this makes sense. thanks for you time!

i know you can set css props with the TweenLite.set method, but was curious if there was somethin similar to a get property, like if you wanted to get a css prop of an element while it was tweening during an onUpdate or something? it doesn't bother me that much to use a jquery.css method or getComputedStyle method, i was just wonderin this since (even though this is my first project working with tweenlite) i'm tending to set css props with set(), animate them as needed with to() or from() or whatever, but wasn't sure if there was a method for get(). ya know, to keep it all the css manipulation in the same family sorta speak..... or on that note, is it beneficial to use TweenLite's set() method over jquery.css() if you have both libraries loaded? _bob

vuury nice. happy you added that noticed on safari it'll keep the backface-visibility and z-index props on tho, even after i asked it to reset the scale. but i just added z-index to the list to clear and it works good now. thanks'gain! _bob

I have something that's been kinda bugging me for a bit when tweening an element's css scale property with js gsap. so i figured i would ask about it since i haven't been able to find anything bout this topic on the forum here. let's say i tween something that changes the transform matrix of an element like: TweenLite.to( elem, 0.5, { ease: Back.easeIn, css: { scale: 0 }}); and then say when i tween the element back in with: TweenLite.to( elem, 0.5, { ease: Back.easeOut, css: { scale: 1 }}); the transform css property will stay on the element ( transform: matrix(0, 0, 0, 0, 0, 0); ) even if the scale was set back to 1.0. is there an alternative solution for scaling elements that will remove the transform automatically afterwards? or is the only solution going to be using the onComplete callback to remove the transform myself after it's done? thanks!