SkewY issue, behave like a strange rotate

[romain.gr 11 Likes (Newbie)]

Hi,

 

I'm working on a little typographic experiment, and on tweening the SkewY value I was surprise to see the element shrinking vertically a bit like a rotate was applied. I have tried without gsap, only in css and it works fine. what could it be? How can I fix that.

 

To see the issue on the codepen :

 

- move your cursor in the top right corner

- open

- write a word in the text field and click the ok button

- move the 'SkewY div' range

 

you'll then see a gap between each div, that shouldn't be the case as I'm "skewing" not rotating.

 

Thank you

 

 

GSAP VERSION with gap between each skewed element

 

 

CSS version without gap (that's what I want).

 

 

See the Pen wYzXyN by romaingranai (@romaingranai) on CodePen

[GreenSock 8,117 Likes (Superhero)]

If I understand you correctly, that's actually quite purposeful but it's easy to change the behavior to what you want.

 

It should be as simple as setting:

CSSPlugin.defaultSkewType = "simple";

 

Or on a per-tween basis: 

TweenMax.to(... {skewType:"simple", skewY:30});

 

From the docs:

Quote

By default, CSSPlugin uses a skewType of "compensated" which affects the skewX/skewY values in a slightly different (arguably more intuitive) way because visually the object isn't stretched. For example, if you set transform:skewX(85deg) in the browser via CSS, the object would become EXTREMELY long (stretched) whereas with skewType:"compensated", it would look more like it sheared in 3D space. This was a purposeful design decision because this behavior is more likely what animators desire. If you prefer the uncompensated behavior, you can set CSSPlugin.defaultSkewType = "simple" which affects the default for all skew tweens, or for an individual tween you can set the special property skewType:"simple"

 

Does that resolve things?

[romain.gr 11 Likes (Newbie)]

Hi Jack,

 

Yes it solves the issue, thanks a lot. ?