Jump to content
Search Community

SkewY issue, behave like a strange rotate

romain.gr 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



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

Link to comment
Share on other sites

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:


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?

  • Like 5
  • Thanks 1
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...