Remove attributes instead of setting to 'auto'

[Gary]

The attached codepen centers text on the screen, and by default auto-sizes the div to the text content.

 

It auto-sizes because white-space is set to nowrap in the .text css class.

 

I can then animate to a width using GSAP, by clicking the 500/800 buttons.

 

To undo the width and go back to auto-size, I need to set the width to "auto" and the white-space back to "nowrap".  However, this leaves behind width and white-space attributes in the element that aren't needed, and weren't there originally.

 

 

It works fine in the codepen, but I'd prefer to remove the unneeded attributes instead because there will be many text elements in play.  I tried setting them to undefined but that didn't work.  Is there a way to do that using GSAP or do I need to manipulate the DOM directly? I'm concerned that manipulating the DOM directly will leave the GSAP tween state misaligned with the DOM.

 

Bonus question:  Any thoughts on how to animate back to the auto-sized width?

 

 

Thanks,

Gary

 

See the Pen myqXRX?editors=011 by GaryC (@GaryC) on CodePen

[Carl]

you can use clearProps like so

 

$("#sizeNone").on("click", function() {
 //will revmoe the in-line style for white-space and width
  TweenLite.set(".text", {clearProps:"whiteSpace, width"})
})

also, clearProps:"all" will remove all in-line properties (in case you don't want to list them all)

 

 

you can try something like this for the bonus question: 

http://codepen.io/GreenSock/pen/pvdaXg?editors=011

 

I'm placing an autoWidth attribute on the .text element so that it sort of knows its normal width.

[Gary]

Thanks, Carl.  clearProps is exactly what I was looking for. 

 

I'm not familiar with autoWidth, is that a jquery extension?

[Carl]

autoWidth was just a name of an attribute that i'm tacking onto the DOM element. I could have used attr("theBestNumberInTheWorld").

 

Take a peak in dev tools at the .text element and you will see something like:

 

 

<div class="text" data-autowidth="978.777777671814" style="transform: translate(-50%, -50%) matrix(1, 0, 0, 1, 0, 0);">The quick brown fox jumped over the lazy dog</div>

 

I added the data- prefix to the CodePen to make the intentions more clear.