SVG text on a path - stopped working?

[kabocreative 29 Likes (Newbie)]

Hi all,

 

So I created a nice simple animated jump link with text rotating on an SVG path. Got it up on the site and moved on.

 

It has stopped working, both on the site and the original codepen.

 

Inspecting I can see now instead of the TextPath rotating, the path itself is.

 

Any ideas greatly appreciated

See the Pen QWrLVpy by kabocreative (@kabocreative) on CodePen

[Carl 11,053 Likes (Superhero)]

Hi,

 

Thanks a bunch for the demo.

 

I'm not sure I am understanding the issue. The text seems to be rotating fine. 

 

Your <path> has an ID of "circle-text-path"

<path id="circle-text-path" d="M 400 250 A 150 150 0 0 1 250 400 A 150 150 0 0 1 100 250 A 150 150 0 0 1 250 100 A 150 150 0 0 1 400 250 Z" ></path>

 

And your tween is targeting that path and rotating it

 

tl.to("#circle-text-path", {
  rotate: 360, transformOrigin: "50% 50%", repeat: -1, duration: 10, ease: "none"
})

 

GSAP seems to be doing exactly what it should and I'm pretty sure targeting the actual <path> and not the <textPath> is the way you should do it.

 

I forked your demo, removed gsap and tried to modify the <textPath> via css and it didn't seem to have any affect

 

textPath, {
  stroke:red;
  stroke-width:2px;
  transform:translateX(200px) scale(4);
}

 

See the Pen MWGYzNM?editors=0100 by snorkltv (@snorkltv) on CodePen

 

Again, it looks like your demo is working fine. If you are expecting other behavior or you can show something that doesn't work we can look into it further.

[kabocreative 29 Likes (Newbie)]

Ooh how strange. You are seeing what I used to see.

 

When you responded with a polite 'eh.... it's doing what you want....' I took a look on my wife's machine (mac) and ta-da it is indeed doing what I want!

On her iPhone and Mac (multiple browsers) it's working.

On my windows (chrome + firefox) and android (chrome) the path is rotating and not the text as per this loom:

 

https://www.loom.com/share/c33f2d1718c24875ae55e04d69190e89

 

I'm now assuming it must be me, but would LOVE it if you happen to be android or windows and can confirm?

 

Now to figuring out what on earth I've done to my setup 🤔

[kabocreative 29 Likes (Newbie)]

Asked a friend. It's working on windows. Just me. Will do some googling

On the plus side, at least it works!

[Carl 11,053 Likes (Superhero)]

thanks for the video. I don't have any windows / android devices.

 

In the demo below I'm rotating the <text> element. Does that give more consistent results?

 

See the Pen oNdgJVd by snorkltv (@snorkltv) on CodePen

 

@GreenSock may be able to shed more light on this, but please understand the company and support staff may be observing holiday hours today

 

 

[kabocreative 29 Likes (Newbie)]

Oooh that's working for me, hurrah. Thanks Carl!

[GreenSock 17,869 Likes (Superhero)]

Yeah, I think some browsers just don't render transforms on textPath or textSpan elements because they're considered "inline" (same for <span> elements). It's totally unrelated to GSAP. With the newer SVG2 spec, it seems some browsers are shifting to support it. 

https://lists.w3.org/Archives/Public/www-svg/2016Jan/0010.html

 

In short, I wouldn't recommend doing it if you want 100% browser support. Do what Carl showed. Or wrap it in a <g>. 👍

[kabocreative 29 Likes (Newbie)]

Thanks Jack. Good lesson to learn now!

 

Listened to a podcast you were on yesterday funnily enough where you mentioned the pain of cross browser support in the days of shifting from flash to JS, especially when it comes to SVG.. and the same day I hit such an issue. Live and learn!

[GreenSock 17,869 Likes (Superhero)]

18 hours ago, kabocreative said:

Thanks Jack. Good lesson to learn now!

 

Listened to a podcast you were on yesterday funnily enough where you mentioned the pain of cross browser support in the days of shifting from flash to JS, especially when it comes to SVG.. and the same day I hit such an issue. Live and learn!

Ha! That's great. Which podcast? Just curious. Must be pretty old! Indeed, the days of switching from Flash to JS were crazy. 🤯

[kabocreative 29 Likes (Newbie)]

It was a bit! I thought I'd have a look around for any good podcasts now I plan on getting into GSAP, and came across Egghead dev chats from 2018! Old, but still good

[Cassie 4,833 Likes (Superhero)]

If you're into streams there's always a ton of good GSAP stuff going on over here - 

 

https://frontend.horse/shows

 

🥳

[kabocreative 29 Likes (Newbie)]

Thanks Cassie

I've historically been a podcast listener.. but this looks so useful I'll find time to watch it!