Animate text on an SVG path

[Yannis Yannakopoulos]

Hello!

 

I want to layout some text on an SVG path and have an animation play in a loop, on hover. On mouse out, the text should go back to its initial state. I used SplitText and the MotionPath plugins in my CodePen and it looks kind of what i want, but i have the following issues:

 

Timeline related:

• The intended initial layout, is the one you'll see if you comment out addPause (line 44). I thought i'd probably need to change the startTime of the timeline, but that's not working. What am i missing?
• On mouseout, i'd like to tween the timeline to its initial state (the corrected initial layout), but again not working as expected. Any ideas?

 

SplitText & MotionPath related:

• Right now the letter & word spacing is off. It's tight to the stagger values. So how can i maintain the default ones? (This animation is intended to work with words of different lengths).
• Is there a callback i could use onResize that would re-calculate the correct position of the letters? 

 

Any help in any of the above would be much appreciated

 

Thanks in advance

See the Pen abZdZzP by neundex (@neundex) on CodePen

[akapowl]

 

Hey @Yannis Yannakopoulos

 

You could set your timeline to reversed initially and on mouse-events, you could check for the reversed state, and depending on that, tell the timeline what to do, like so

 

tl.reversed() ? tl.play() : tl.reverse();

 

Does that come close to what you thought of?

 

See the Pen 435b6ed383676fc46558b2840117e390 by akapowl (@akapowl) on CodePen

 

 

[Yannis Yannakopoulos]

15 minutes ago, akapowl said:

Does that come close to what you thought of?

 

Thank you @akapowl i did try .reverse(), but i don't think it's the way to go for this one. If you hover the element and stay for 2 loops, reverse will play backwards twice.

[ZachSaucier]

Hey Yannis. With this level of control it's probably best to set up a "real" tween (not stagger) for each letter using a loop and set up the start and end of the motion paths based on what you want the offset to be. Something like this:

See the Pen VwjKPWV?editors=0010 by GreenSock (@GreenSock) on CodePen

 

(It seems that MotionPathPlugin doesn't like numbers with a lot of repeating numbers, hence why I had to add the rounding to 2 decimal places. @GreenSock not sure if we want to change that or not)

[akapowl]

 

Nice solution @ZachSaucier

 

Just as a sidenote:

For me, your solution did not apply the mouse-events properly.

 

I had to change this 

 

$svg.on('mouseenter, mouseleave', () => tl.reversed() ? tl.play() : tl.reverse());

 

to that

 

$svg.on('mouseenter', () => tl.reversed() ? tl.play() : tl.reverse());
$svg.on('mouseleave', () => tl.reversed() ? tl.play() : tl.reverse());

 

 

See the Pen ffe2fe95c06831a422d6400350954ad2 by akapowl (@akapowl) on CodePen

 

 

 

[Yannis Yannakopoulos]

2 hours ago, ZachSaucier said:

With this level of control it's probably best to set up a "real" tween (not stagger) for each letter using a loop and set up the start and end of the motion paths based on what you want the offset to be.

Makes perfect sense Zach, many thanks for this! 

 

Any ideas on maintaining the correct letter & word spacing?

[GreenSock]

2 hours ago, ZachSaucier said:

(It seems that MotionPathPlugin doesn't like numbers with a lot of repeating numbers, hence why I had to add the rounding to 2 decimal places. @GreenSock not sure if we want to change that or not)

Very interesting - this was caused by tiny math issues related to binary systems: 

start: 2.8 / 5, // (0.5599999999999999)
end: 2.8 / 5 + 1, // (1.56)

Thus those values were interpreted as slightly more than one iteration around. That should be resolved in the next release which you can preview at https://assets.codepen.io/16327/MotionPathPlugin.min.js

 

Here's how I'd probably do it (I'm not a fan of the instant/jarring change in direction): 

See the Pen 5b5b47f9fe28ff287db07274154199dd?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Does that help? 

[Yannis Yannakopoulos]

On 10/20/2020 at 9:31 PM, GreenSock said:

Does that help? 

That's really cool Jack and it does help indeed 😀

 

Only point being that SplitText doesn't follow the right letter & word spacing of the initial phrase. 

Would you say that this is something i could tackle with CSS or SplitText settings, or is it a timeline issue? 

[GreenSock]

4 hours ago, Yannis Yannakopoulos said:

Only point being that SplitText doesn't follow the right letter & word spacing of the initial phrase. 

Would you say that this is something i could tackle with CSS or SplitText settings, or is it a timeline issue? 

That's just related to how you're setting up the start/end values. That's totally unrelated to GSAP and beyond the scope of these forums, so I don't have time to figure it all out for you but it should be possible to build an algorithm for that. If someone else wants to chime in and help out for free, great. Otherwise, you may need to hire someone to do that consulting work. Feel free to reach out to us privately if you'd like to explore that with GreenSock. 

 

Good luck with the project. 

[Yannis Yannakopoulos]

Thank you Jack! 

[lagalga]

Hi! I'm trying to set something similar but cannot make it with textPath because of svg redimension…

I'd like to animate a text on a simple path on scroll, like this: https://www.dropbox.com/scl/fi/z9phi9hvkg1k415lpypqj/text-animation.mov?rlkey=n2jobltwtkp4fe6hjduw558hi&dl=0

 

Do I have to use SplitText? I've tried forking your codepen but the text gets mixed…

[GreenSock]

31 minutes ago, lagalga said:

Hi! I'm trying to set something similar but cannot make it with textPath because of svg redimension…

What do you mean by "...because of SVG redimension"? 

 

My guess is that SVG is going to be your best bet here, and you probably don't need SplitText. 

 

If you still need help, please make sure you provide a minimal demo (like a CodePen) that clearly illustrates the problem and shows your attempt.

[lagalga]

Yep, sorry. I forgot to mention i need a constant font size, not resizeable with viewport… so if the section is 100vh, the path somatimes would be more horizontal and sometimes vertical… deforming the path, changing the font size and its glyphs proportion (

See the Pen OJrZVwO by lagalga (@lagalga) on CodePen

).

 

So I saw this post and thought i could set a simple path (two perpendicular lines, a corner), where the text moves on scrolling (not animated like this post), but not realizing where to start: 

See the Pen abPGLQb by lagalga (@lagalga) on CodePen

 

[Rodrigo]

Hi,

 

This is related to the initial position of the characters. Jack's original example has a different setup than the one you actually need in order to spread out the characters in the path.

 

This seems to work as expected:

See the Pen GRPdYMN by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[lagalga]

10 minutes ago, Rodrigo said:

Hi,

 

This is related to the initial position of the characters. Jack's original example has a different setup than the one you actually need in order to spread out the characters in the path.

 

This seems to work as expected:

 

 

 

Hopefully this helps.

Happy Tweening!

Thnk you. I suppose i need to use   instead of regular spaces… and who do i animate this on scrolltrigger, not automatically with hover?

[Rodrigo]

Hi,

 

Indeed it looks better with non breaking spaces. I updated the codepen example in my previous post.

 

Happy Tweening!