Is there a formal way to set/get/clear _gsTransform?

[Tom B. @ Wix 2 Likes (Newbie)]

We are using GS in an environment where we might need to change element styles on the fly before, after or in between animations (change rotation or opacity for example).

 

But, GS saves the initial values on element._gsTransform and I have to delete or update it manually if I want my animations source/destination values to update with my elements.

 

I couldn't find any reference for a formal way to set get or remove gsTransform properties. is there any? is there one in the making? are there any best practices?

 

Thanks

 

Tom.

[GreenSock 8,117 Likes (Superhero)]

Sure, if you want to clear those, you can do something like this:

TweenLite.set(element, {clearProps:"transform"}); 

It'll also work if you clearProps: any transform-related value, like clearProps:"rotation". 

 

I'd recommend killing tweens of that element first, though, because it wouldn't be good to clear the transforms right in the middle of a transform-related tween. TweenLite.killTweensOf(element). Actually, you could simply add overwrite:"all" to your set() above and it'll have the same effect. 

 

Is that what you're looking for? 

[Cario 1 Likes (Newbie)]

Sure, if you want to clear those, you can do something like this:

TweenLite.set(element, {clearProps:"transform"}); 

It'll also work if you clearProps: any transform-related value, like clearProps:"rotation". 

 

 

 

apparently clearProps deletes previously set (inline) transform properties of an element...

is there a way to revert back to element's original inline styles? 

 

HTML:

<div id="el" style="-webkit-transform: rotate(45deg);">blabla</div>

JS - tween:

TweenMax.to("#el", 2, {rotation:125});

JS - clearProps:

TweenMax.killTweensOf("#el");
TweenMax.set("#el", {clearProps: "transform"});

the result is not as expected, element rotation is at 0 degrees instead of 45 degrees

[GreenSock 8,117 Likes (Superhero)]

Right, clearProps clears the inline style(s) - it's not supposed to revert to an old value. 

 

If you want to revert, you could simply record the style.cssText for the element before the tween, and then set it back to that whenever you want. Or you could rewind the tween back to zero, like:

var tween = TweenMax.to("#el", 2, {rotation:125});
//then later...
tween.seek(0).kill();

[Tom B. @ Wix 2 Likes (Newbie)]

Ok, so what you are saying is - No, there is no "GreenSock" way to do it and I should do it programatically?

 

It would have been nice to have something like - 

//Save the current state of an element, and revert

TweenMax.from('id', 1, {scale:2, saveProps:true});
TweenMax.revertProps('id');

//Or to reset _gsTransforms without editing it directly

TweenMax.setTransformsOrigin('id', {'...new transform values...'})

//Or a way reset _gsTransform to current state on animation start

var recurringTween = TweenMax.from('id', 1, {scale:2, resetTransformOnStart:true});

Anyway, thank you, that helped a lot.

If we manage to write something that I'll feel is useful to everyone i'll post it here

[GreenSock 8,117 Likes (Superhero)]

Actually, you can force GSAP to re-parse the transform data (instead of using what it previously recorded in _gsTransform) by passing parseTransform:true in the vars parameter. It's pretty rare that you'd ever need to do that, but it sounds like it might come in handy for you. 

[Tom B. @ Wix 2 Likes (Newbie)]

thanks.

That could actually help a lot.