Packo Posted March 16, 2022 Share Posted March 16, 2022 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? Link to comment Share on other sites More sharing options...
Cassie Posted March 16, 2022 Share Posted March 16, 2022 That just looks like a scale on the ellipse? gsap.to(ellipse, { scale: 3 // or other large number }) Link to comment Share on other sites More sharing options...
Packo Posted March 16, 2022 Author Share Posted March 16, 2022 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? Link to comment Share on other sites More sharing options...
Cassie Posted March 16, 2022 Share Posted March 16, 2022 Oh! Sorry I didn't explain further, your title implied you knew that you had to use a Clip Path. Here you go! Link to comment Share on other sites More sharing options...
Packo Posted March 16, 2022 Author Share Posted March 16, 2022 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 Link to comment Share on other sites More sharing options...
OSUblake Posted March 16, 2022 Share Posted March 16, 2022 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"> 1 Link to comment Share on other sites More sharing options...
Packo Posted March 16, 2022 Author Share Posted March 16, 2022 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. Link to comment Share on other sites More sharing options...
OSUblake Posted March 16, 2022 Share Posted March 16, 2022 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. 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