Share Posted October 10, 2018 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 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 More sharing options...
Share Posted October 10, 2018 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? 5 1 Link to comment Share on other sites More sharing options...
Author Share Posted October 10, 2018 Hi Jack, Yes it solves the issue, thanks a lot. ? 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now