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

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

 

121222101_ScreenShot2018-10-10at21_35_53.thumb.png.c80bbaa6f9333bf40c19c9d7a5d58e77.png

 

GSAP VERSION with gap between each skewed element

 

1433124390_ScreenShot2018-10-10at21_37_52.thumb.png.c42a77fcb5fa888528a5f39946c99470.png

 

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:

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?

  • 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...