Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

QuickTip: skewType
Sign in to follow this  


| GreenSock
965

Note: This page was created for GSAP version 2. We have since released GSAP 3 with many improvements. This includes removing skewType. Please see the GSAP 3 release notes for details.

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

Watch the video

Demo: skewType compensated vs simple

See the Pen GSAP skewType comparison by GreenSock (@GreenSock) on CodePen.

Remember, if you hit the 360 button you could crash your browser as explained in the video.

Get an all-access pass to premium plugins, offers, and more!

Join the Club

When is the last time you worked on something you love? Go animate something cool and then share it with us.

- Team GreenSock
Sign in to follow this  


User Feedback

Recommended Comments

There are no comments to display.



Guest
This is now closed for further comments

×