MorphSVG position and responsive

[Jay LV]

Hi,
I'm working on this animation using ScrollTrigger & MorphSVG: 
But I have trouble positioning the animation in the middle of the page (horizontally + vertically). The animation keep leaning to the left side even though I've set all the transform origin to center. 
This is what I'm trying to achieve: 

See the Pen ZEZJLWV by jakievu (@jakievu) on CodePen

The animation stick to center as well as resize responsively. The only difference between those 2 codepen above is that I'm wrapping the <video> inside a <div> tag instead of a <foreignobject> tag because that's the only way clip-path would work on Safari. 

Hopefully someone can help!

Thank you

See the Pen zYQEwyY by jakievu (@jakievu) on CodePen

[GreenSock]

Yeah, I think you might be misunderstanding how clipping works (the measurements in particular), but I spent some time to deliver a solution (at least I think this is what you were trying to do): 

 

See the Pen WNBZJWj?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Does that help? 

[Jay LV]

9 hours ago, GreenSock said:

Yeah, I think you might be misunderstanding how clipping works (the measurements in particular), but I spent some time to deliver a solution (at least I think this is what you were trying to do): 

 

 

 

 

Does that help? 

OMG that helps alot! Thank you.

To be honest, I'm having a hard time positioning clip-path since I'm still learning setting it up. Can you point me to what change did you make to make it centered Besides making the SVG into absolute position? Cause I want to make it resize to mobile as well.  I saw that you added a new set of GSAP code, would it be possible to make the SVG resize with the viewport using GSAP?

 

[GreenSock]

1 hour ago, Jay LV said:

Can you point me to what change did you make to make it centered

Sure, it was just this: 

function positionClipping() {
  let video = document.querySelector(".bg-video"),
      bounds = startShape.getBBox();
  gsap.set(startShape, {
    // first, figure out how far it'd take to center the element at 0,0, then offset it by half the width/height of the video
    x: -(bounds.x + bounds.width / 2) + video.offsetWidth / 2, 
    y: -(bounds.y + bounds.height / 2) + video.offsetHeight / 2
  });
}
ScrollTrigger.addEventListener("refresh", positionClipping);

I made the SVG position: absolute because otherwise it was taking up space in the Flexbox and shoving your video over (off-centered). That basically took it out of the document flow. 

 

1 hour ago, Jay LV said:

I saw that you added a new set of GSAP code, would it be possible to make the SVG resize with the viewport using GSAP?

Sure, you can do whatever you want with the CSS. Maybe I'm not understanding your goal properly. Feel free to give it a try and if you get stuck, post back here with a minimal demo that very clearly illustrates the problem.