chrisi51 Posted November 20, 2020 Share Posted November 20, 2020 Hey there, i did understood how text motion along a path is working but i struggle around with a problem, when i need to create the text element dynamically. For example if i have different languages or just random text, i would like to prefer to create those texts outside of illustrator. Something seems to be wrong with appending the path. I also don't get it working, if i have a static text element in the svg and try to append a textpath to it. Both of em seem to be correct according to dom inspector but they are somewhere out of the viewport as it seems. It was inspired by some Trick posts of @PointCbut everything was just static elements in the svg. What am i doing wrong? See the Pen OJXeymO by chrisi51 (@chrisi51) on CodePen Link to comment Share on other sites More sharing options...
PointC Posted November 20, 2020 Share Posted November 20, 2020 I'm not sure I follow everything you're trying to do in your demo, but if you just want to change the text that follows the path, the easiest thing would be to change the textContent of the text node. Here's a fork of my original demo with that example. See the Pen VwjJaqw by PointC (@PointC) on CodePen Hopefully that helps. Happy tweening. 4 1 Link to comment Share on other sites More sharing options...
chrisi51 Posted November 20, 2020 Author Share Posted November 20, 2020 Thank you for your response @PointC - its not exactly what i was looking for but it points out a way i could go probably. My main problem on this is, that adobe illustrator don't give me a way to place text on a path without dropping the information. instead it exports the text, where each letter is simply positioned, as it would follow the path. so path is gone and text is also gone. so i can't animate it afterwards. Just tried affinity designer which does the same So my plan was to just draw the paths, on which text will move along and than place my text afterwards via javascript. So i would be Independent of the design layer and also could switch languages. But for any reason the appending of the textpath is not working. I know its not really a gsap issue but hoped you will know this problem and give advice on how to fix it Link to comment Share on other sites More sharing options...
mikel Posted November 20, 2020 Share Posted November 20, 2020 Hey @chrisi51 Please take a look at tutorials on TextPath - e.g. this See the Pen 6fa7024ac0283e5e5715777155c9d554?editors=1010 by mikeK (@mikeK) on CodePen Happy tweening ... Mikel 5 Link to comment Share on other sites More sharing options...
Solution chrisi51 Posted November 20, 2020 Author Solution Share Posted November 20, 2020 just realized that i need another function to add xlink:href instead of textpath.setAttribute('xlink:href', "#masterpath"); you have to use textpath.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', "#masterpath"); so i can draw my paths now in illustrator and put text on em afterwards. 3 Link to comment Share on other sites More sharing options...
PointC Posted November 20, 2020 Share Posted November 20, 2020 Good work and thanks for letting us know you're now on the right path. See what I did there? 1 3 Link to comment Share on other sites More sharing options...
chrisi51 Posted November 20, 2020 Author Share Posted November 20, 2020 1 hour ago, PointC said: See what I did there? @PointC What do you mean? did you changed any on your pen? i don't get it 😅 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