Poylar Posted December 28, 2022 Share Posted December 28, 2022 Hi. I want to create an effect where a path line is drawn and city names appear as the line passes through the points. What is the best way to do this in this case: 1. Make svg only path line and points, and make cities separate divs 2. Make the names of cities, lines and points in one svg file and draw them simultaneously, tied to the animation time of the line itself (Or is it impossible?) Also in theory I would also like to use morphSVG here to redraw the path, is that possible? Maybe there are some ready-made examples or additional tips? See the Pen ExpPejL by poylar (@poylar) on CodePen Link to comment Share on other sites More sharing options...
Solution Cassie Posted December 28, 2022 Solution Share Posted December 28, 2022 Hi Poylar! I'd probably put everything in one SVG, nice and tidy and easy to scale. To tie the 'dots' in to the line animation is very doable - basically what GSAP excels at - sequencing! You'll need to look into a timeline and the position parameter And yes, that's what morphSVG is for, morphing SVG elements ☺️ This all sounds very acheivable. 1 Link to comment Share on other sites More sharing options...
Poylar Posted December 28, 2022 Author Share Posted December 28, 2022 33 minutes ago, Cassie said: Hi Poylar! I'd probably put everything in one SVG, nice and tidy and easy to scale. To tie the 'dots' in to the line animation is very doable - basically what GSAP excels at - sequencing! You'll need to look into a timeline and the position parameter And yes, that's what morphSVG is for, morphing SVG elements ☺️ This all sounds very acheivable. MorhphSVG working good with <TEXT> in svg? Link to comment Share on other sites More sharing options...
Cassie Posted December 28, 2022 Share Posted December 28, 2022 Are you asking if you can morph text elements? If so, no I'm afraid not, morphSVG morphs SVG paths by animating the data inside the 'd' attribute There's also a utility function, MorphSVGPlugin.convertToPath() that converts shapes like <circle> or <rect> to paths that you can morph. 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