Clear an inline style which is set by a GSAP animation

Question

I can't seem to be able to clear a style on an image element which has been set by a GSAP animation.

I've tried various methods:

$('#element').removeAttr("style");

$('#element').attr('style', '');

$("#element").css({
    '-webkit-transform': "",
    '-moz-transform': "",
    '-o-transform': "",
    'msTransform': "",
    'transform': ""
});

None of the above work. Though, when I run these methods from the Chrome Console they do work...

The applied style is as follows:

style="-webkit-transform: matrix(-0.99775, 0.06697, -0.06697, -0.99775, 0, 0);"

Answer 1

If you're trying to clear properties, you can use GSAP's clearProps special property, like:

//clear all inline properties immediately with a set() call:
TweenLite.set("#element", {clearProps:"all"});

//or clear just the transform:
TweenLite.set("#element", {clearProps:"transform"}); 

//or clear the transform at the end of your tween:
TweenLite.to("#element", 1, {rotation:60, scale:0.5, clearProps:"transform"});

For the record, GSAP only sets properties when you ask it to (like during a tween) - it does NOT continuously force them into the inline style. Transforms are a bit of an odd beast because in order to work around certain browser bugs and maintain state properly, it must record the transform components (rotation, scale, position, skew) on the element itself and then it reads those next time you tween that element unless you set parseTransform:true which forces it to read the computed style matrix from the browser, but that is almost never necessary. And of course if you clearProps:"all" or any of the transforms, it'll wipe them out too and re-parse them next time from the matrix the browser provides.

If you're still having trouble, it'd really help to see the problem in context with your GSAP code too, so please provide a reduced test case in codepen or jsfiddle or something.

Happy tweening!