What i should animate to create this effect without content distortion?

[Poylar]

Hi.

As you can see, I tried to make the block move around in different directions, for this I used scaleX, but the content inside this block shrinks during the animation (And this is logical), what should I use instead of scaleX to make this effect?
I tried to find some reference but couldn't find it.
I'm sorry if this question is out of scope for gsap, but I just don't know where else to ask.

See the Pen vYrBjzy by poylar (@poylar) on CodePen

[mvaneijgen]

Have you ever worked with clipPath? Seems like that could be a cool effect and this will not scale your content. The most important part is that in your CSS and in your JS the clipPath has the same amount of points. I've also changed your .to() to .from(). Here is a visual clipPath tool https://bennettfeely.com/clippy/ I like to use instead of writhing clip paths by hand. 

 

See the Pen GRGKGWx?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

 

You can even do something like this, by offsetting what the middle points are of the clipPath

 

See the Pen gOKYKWK?editors=0110 by mvaneijgen (@mvaneijgen) on CodePen

 

Hope it helps and happy tweening!

[Poylar]

22 minutes ago, mvaneijgen said:

Have you ever worked with clipPath? Seems like that could be a cool effect and this will not scale your content. The most important part is that in your CSS and in your JS the clipPath has the same amount of points. I've also changed your .to() to .from(). Here is a visual clipPath tool https://bennettfeely.com/clippy/ I like to use instead of writhing clip paths by hand. 

 

 

 

 

You can even do something like this, by offsetting what the middle points are of the clipPath

 

 

 

 

Hope it helps and happy tweening!

Thanks for the answer. Yes, I know about clip-path but it is very poorly supported in browsers and I try to avoid using it.

[mvaneijgen]

Seems fine to me https://caniuse.com/css-clip-path. If a browser doesn't support it, there is no issue, it will be just a content block, without an animation. 

[Poylar]

9 minutes ago, mvaneijgen said:

Seems fine to me https://caniuse.com/css-clip-path. If a browser doesn't support it, there is no issue, it will be just a content block, without an animation. 

It's just that everything is yellow And I can't determine support for the polygon property on caniuseit.
One way or another, I will try to use this, but if there are any other options for solving this problem, then I would consider them

[Rodrigo]

Hi,

 

Unfortunately HTML and CSS don't offer too many ways of achieving what you want to do. The ideal path is masking/clipping, as @mvaneijgen showed in the examples He posted.

 

Another alternative is to use SVG for that content which will work without any issues on mostly every browser.

 

Finally here you can find out more about CSS Clip and Masks:

https://css-tricks.com/clipping-masking-css/

 

Happy Tweening!