How do i scale on the x-axis without losing content aspect-ratio

[thetobiterra]

Hey guys, so I’ve really tried all I can think of to recreate this but it just doesn’t work.

Using scaleX with transform origin set to right center, it of course scales to the left but the video is then compressed and loses its original aspect ratio. Using width, I get the same issue plus there isn’t a way to scale in one direction with this. I then thought of using border radius but that won’t stretch the vid-container.

I then thought of clip-path but that won’t work either because it’ll only show us the part we specified with the “at x and y axis” and what i want is for the video to remain centered

In the pen provide, i'm not animating on scroll yet as right now, i am just trying to figure out how the whole scaling thing works

I dunno if I’m approaching this the wrong way or maybe there is a gsap that can achieve this. I’d appreciate if someone could help with tips or hints thanks

See the Pen rNoGvWX by the0xtobi (@the0xtobi) on CodePen

[mvaneijgen]

Hi @thetobiterra, why would a clipPath not work? This is just a quick set up, with a shape I got from https://bennettfeely.com/clippy/ I'm not sure if that pill shape is easily recreated with a clip-path and maybe a SVG shape is better with the use of MorphSVG plugin. Hope it helps and happy tweening! 

 

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

 

Using SVG as a clip path is a bit weird, they need to be 1px by 1px for it to show up, check out this post. 

https://davesmyth.com/clip-path-scaling

[IndM]

Hi there @thetobiterra!

The thing is that you have to use max width to animate. This way in combination with object-fit it would always center the image/ video. If you use scale it would expand all the items and won't give you the effect you want.

Is this something you're looking for?

See the Pen OJrxEYP by indy-meermans (@indy-meermans) on CodePen

[thetobiterra]

2 hours ago, mvaneijgen said:

Hi @thetobiterra, why would a clipPath not work? This is just a quick set up, with a shape I got from https://bennettfeely.com/clippy/ I'm not sure if that pill shape is easily recreated with a clip-path and maybe a SVG shape is better with the use of MorphSVG plugin. Hope it helps and happy tweening! 

 

 

 

 

Using SVG as a clip path is a bit weird, they need to be 1px by 1px for it to show up, check out this post. 

https://davesmyth.com/clip-path-scaling

using clip-path wont give the desired effect because in the example vid i provided, the div that contains the video is originally positioned to the far right with the video right in the middle. And on scroll, it somehow scales (the div) to the left with the video maintaining its centered position. Thanks for the contribution still, really appreciate

[thetobiterra]

2 hours ago, IndM said:

Hi there @thetobiterra!

The thing is that you have to use max width to animate. This way in combination with object-fit it would always center the image/ video. If you use scale it would expand all the items and won't give you the effect you want.

Is this something you're looking for?
 

 

Yes!! This is exactly what i was looking for. This is just perfect, thank you! It's funny how i always think i know enough css until something like this happens lol! Thanks again