Jay LV Posted June 11 Share Posted June 11 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 Link to comment Share on other sites More sharing options...
GreenSock Posted June 11 Share Posted June 11 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? 1 Link to comment Share on other sites More sharing options...
Jay LV Posted June 12 Author Share Posted June 12 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? Link to comment Share on other sites More sharing options...
GreenSock Posted June 12 Share Posted June 12 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. 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