Jump to content
Search Community

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

Tom B. @ Wix test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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.

Link to comment
Share on other sites

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? 

  • Like 1
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

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();
  • Like 1
Link to comment
Share on other sites

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...