How to achieve this effect when using clip-path ellipse

[Packo]

I've been trying to achieve this effect just like as the video shows. However, I can't seem to figure out how to do it since ellipse doesn't allow to stretch fullscreen like on the video. Any ideas how to achieve this?  

[Cassie]

That just looks like a scale on the ellipse?
 

gsap.to(ellipse, {
 scale: 3 // or other large number 
})

 

[Packo]

yeah, but how do you scale it without scaling the actual Image? If I wrap with the div the image, the image will scale as well. Maybe do it on pseudo element of the image rather? 

[Cassie]

Oh! Sorry I didn't explain further, your title implied you knew that you had to use a Clip Path.

Here you go!
 

 

[Packo]

4 minutes ago, Cassie said:

Oh! Sorry I didn't explain further, your title implied you knew that you had to use a Clip Path.

Here you go!
 

 

Yes, I am wondering if it would be possible to achieve this with clip-path, since we are using a reusable component that wraps the image like this:

  <div class="absolute w-full h-full md:h-[90%] hero-media">
        <ShapeEllipse v-if="mask.show" :mask="mask">
          <SpaImg
            v-if="item.image[0]"
            :image="item.image[0]"
            :lazy="lazy"
            :sizes="sizes"
            :presets="presets"
            class="w-full h-full object-cover object-center"
          />
        </ShapeEllipse>
      </div>

But since I wasn't able to find how to preserve the image scale if scaling the ellipse, I thought maybe the svg do the trick as you suggested

[OSUblake]

Hi Packo,

 

I'm going to move this thread to the regular GSAP forum as this really isn't a banner question.

 

5 hours ago, Packo said:

Yes, I am wondering if it would be possible to achieve this with clip-path, since we are using a reusable component that wraps the image like this:

 

You can definitely animate a clip-path separate from the image, just like in the thread Cassie linked to, or even this one.

 

 

As far a reusable components go, it's possible, but I don't know what those components are doing. One thing to keep in my for a clip path component is that you need to make sure that you assign a unique id to every clip-path or else it's just going to use the first one that it finds in the DOM.

 

<clipPath id="MAKE_ME_UNIQUE!!!" clipPathUnits="objectBoundingBox">

 

[Packo]

24 minutes ago, OSUblake said:

Hi Packo,

 

I'm going to move this thread to the regular GSAP forum as this really isn't a banner question.

 

 

You can definitely animate a clip-path separate from the image, just like in the thread Cassie linked to, or even this one.

 

 

As far a reusable components go, it's possible, but I don't know what those components are doing. One thing to keep in my for a clip path component is that you need to make sure that you assign a unique id to every clip-path or else it's just going to use the first one that it finds in the DOM.

 

<clipPath id="MAKE_ME_UNIQUE!!!" clipPathUnits="objectBoundingBox">

 

Hey Blake! Thank you so much for the suggestion. I'll try it out! But there's a little miscomunication with the clip-path. I meant it as a plain CSS property, not a tag inside a svg tag. That's where my I was scratching my head around if it's used as a CSS clip-path as a wrapper of the image. 

[OSUblake]

It will be probably be easier to use the SVG option as I'm not sure how you would rotate it using a CSS property.