sohe Posted November 10, 2022 Share Posted November 10, 2022 Hi everyone, long time fan and first time poster, I had the following question regarding svg morph, when my two shapes are morphing you can see a harsh outline of the svg viewbox is there a way to avoid this? I am also trying to trigger this animation on scroll using scrolltrigger - would anyone be kind of enough to advise me of best practices of using morph and scrolltrigger together in react? Attached is a codepen demo. Thank you for your help and amazing product. See the Pen ZEReLZy by Scanton (@Scanton) on CodePen Link to comment Share on other sites More sharing options...
Rodrigo Posted November 10, 2022 Share Posted November 10, 2022 Hi @sohe and welcome to the GreenSock forums! First, thank you for being a Club GreenSock member and supporting GSAP! 🥳 I believe that the issue lies on the size of your filter, perhaps make it the size of your SVG and give your SVG element a viewport so there is some mark of reference for that as well. Unfortunately SVG is not something I excell at so I couldn't give you a proper answer. @Cassie and @PointC on the other hand, are GSAP's resident SVG wizards and they could enlighten us regarding this particular subject. Finally keep in mind that SVG filters are super expensive and in something as big as this you might run into performance issues. While this works fine on Chrome, on Firefox I can actually here the CPU fan going faster, which tells me that the CPU is under a bit of stress because of it, so tread carefully with SVG filters, especially in those sizes. Happy Tweening! 2 Link to comment Share on other sites More sharing options...
Solution PointC Posted November 10, 2022 Solution Share Posted November 10, 2022 You'll need to up your filter width/height. I used 150% but you can set it to your liking. See the Pen 6ac6bf4810ef1c0892f473088e6c6a46 by PointC (@PointC) on CodePen But as @Rodrigo mentioned, I'd recommend restraint with that kind of animation when it's so large. Happy tweening. 3 Link to comment Share on other sites More sharing options...
sohe Posted November 11, 2022 Author Share Posted November 11, 2022 Thank you so much for your help everyone! and thank you for giving me tips regarding performance issues. I am going to look into this again and will update. Thanks once again 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