Animate text on an SVG path

[Yannis Yannakopoulos 47 Likes (Newbie)]

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 5,479 Likes (Superhero)]

 

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 47 Likes (Newbie)]

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 7,162 Likes (Superhero)]

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 5,479 Likes (Superhero)]

 

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 47 Likes (Newbie)]

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 18,870 Likes (Superhero)]

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 47 Likes (Newbie)]

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 18,870 Likes (Superhero)]

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 47 Likes (Newbie)]

Thank you Jack!