QuickTip: skewType

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”…

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.


Print Share Comment Cite Upload Translate
APA
Blog | Sciencx (2024-03-29T09:26:07+00:00) » QuickTip: skewType. Retrieved from https://www.scien.cx/2019/04/15/quicktip-skewtype/.
MLA
" » QuickTip: skewType." Blog | Sciencx - Monday April 15, 2019, https://www.scien.cx/2019/04/15/quicktip-skewtype/
HARVARD
Blog | Sciencx Monday April 15, 2019 » QuickTip: skewType., viewed 2024-03-29T09:26:07+00:00,<https://www.scien.cx/2019/04/15/quicktip-skewtype/>
VANCOUVER
Blog | Sciencx - » QuickTip: skewType. [Internet]. [Accessed 2024-03-29T09:26:07+00:00]. Available from: https://www.scien.cx/2019/04/15/quicktip-skewtype/
CHICAGO
" » QuickTip: skewType." Blog | Sciencx - Accessed 2024-03-29T09:26:07+00:00. https://www.scien.cx/2019/04/15/quicktip-skewtype/
IEEE
" » QuickTip: skewType." Blog | Sciencx [Online]. Available: https://www.scien.cx/2019/04/15/quicktip-skewtype/. [Accessed: 2024-03-29T09:26:07+00:00]
rf:citation
» QuickTip: skewType | Blog | Sciencx | https://www.scien.cx/2019/04/15/quicktip-skewtype/ | 2024-03-29T09:26:07+00:00
https://github.com/addpipe/simple-recorderjs-demo