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


This content originally appeared on Blog and was authored by Blog

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.


This content originally appeared on Blog and was authored by Blog


Print Share Comment Cite Upload Translate Updates
APA

Blog | Sciencx (2019-04-15T15:38:46+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 ,<https://www.scien.cx/2019/04/15/quicktip-skewtype/>
VANCOUVER
Blog | Sciencx - » QuickTip: skewType. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2019/04/15/quicktip-skewtype/
CHICAGO
" » QuickTip: skewType." Blog | Sciencx - Accessed . 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: ]
rf:citation
» QuickTip: skewType | Blog | Sciencx | https://www.scien.cx/2019/04/15/quicktip-skewtype/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.