mea_culpa Posted September 23, 2022 Share Posted September 23, 2022 Hi, I'm trying to make transition of path's "d" attribute and something strange happens, I know that both paths should have the same number of points. Can someone point me to what I'm missing here? Thanks in advance! See the Pen yLjzgrp by mea-cuipa (@mea-cuipa) on CodePen Link to comment Share on other sites More sharing options...
mvaneijgen Posted September 23, 2022 Share Posted September 23, 2022 Your path is not a line it are two lines really close to each other! What you want is just a single line. Working with SVG on the web requires some elbow grease to get the files really clean. What I also see is that path points have a lot of decimal points 4248.45703125, this isn't the worst thing in the world, but the detail isn't necessary. I've loaded your SVG in an online tool, so that you can better see it your self. If you zoom in you see there is a double line and that is what is messing up the animation 2 Link to comment Share on other sites More sharing options...
GreenSock Posted September 23, 2022 Share Posted September 23, 2022 If you're trying to interpolate between raw "d" strings, then not only would there need to be identical numbers of points in the start/end, but they'd also have to have identical path commands (so ONLY the numbers are changing). It's much cleaner to just use MorphSVGPlugin which solves all those problems for you. It'll let you use any number of points and it'll also figure out how to meld the path commands. Obviously that's only available to Club GreenSock members, through. Good luck! 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