motionpathplugin Text animating on a motionPath with SplitText

[Yoram]

Hi,

 

This is my first time posting in the forum! I searched everywhere but could not find the answer so here goes.

 

I want to animate a line of text on a motion path. At the moment it is not working as the characters all end up on top of each other. I think it has to do with the start/end within the path that's being set but I do not know how to add code to address this.

 

(FYI my end goal is to animate the three lines of text on three different motion paths perhaps using the class for each line. Any help would be appreciated.)

 

See the Pen oNxxgBO by yoyoyoram (@yoyoyoram) on CodePen

[ZachSaucier]

Hey Yoram and welcome. I see a couple of ways of handling this sort of animation.

 

The first (and probably what I'd do) is to create your paths where the start of it is off screen by as much as your left-most letter (in this case the s in "safe").  Then you create the MotionPath animation with align: "self". That way if still animates in from off screen but each letter ends up in the correct location.

 

The second is to have the MotionPath start where it currently is but set the end value to whatever it needs to be to make each letter end up where it should be. This would require a lot of trial and error to figure out which progress value should be the end value for each letter.

[Yoram]

Hi Zach! Thanks for your suggestions. I tried the first route you mentioned, worked perfectly!! Do you know how I can eliminate the little bump at the end of the animation as the copy comes to a rest? Also at the moment the line is using one path for all three lines, my goal is to use three different paths which will result in the copy looking like its all on one line right before they split to their resting position. Thanks again!!

 

 

[ZachSaucier]

3 minutes ago, Yoram said:

Do you know how I can eliminate the little bump at the end of the animation as the copy comes to a rest?

I'm not seeing any little bumps in the demo you linked. Are you seeing it there?

 

To use different paths, just tell which letters to use a which path. I'm not sure if you are having trouble and if so what the issue is. It'd help if you could be more clear.

 

Side notes:

• We recommend using GSAP formatting. See this post for more info:
• To learn how to use CodePen better, see the video on this page: 
• I think you'd also benefit from my article on animating efficiently.

[PointC]

Just FYI - you can also animate with a SVG textPath.

 

See the Pen vRzmeO by PointC (@PointC) on CodePen

 

I wrote a little bit about it here:

Happy tweening.

 

[Yoram]

Thank you both!!

 

I am trying to have the sentence all come along the shared path area (in green) and then once they reach the three splits (in pink) to each stick to their own lane. Does that make any scene?

 

Also what are the advantages and disadvantages of using svg text.

 

Thanks again!!

[PointC]

35 minutes ago, Yoram said:

Also what are the advantages and disadvantages of using svg text.

The biggest advantage would be that it's all one element. The text and motion paths will scale nicely together and it's easy to make it all responsive. It all depends on what you're doing though. There's nothing wrong with the way you're setting it up now. I was just pointing out other options.

 

Just my two cents. YMMV

 

[Yoram]

Hi Zach

 

I was wondering if you saw my post from earlier today. I am still trying to get the copy to come in all on the same line and split at the last minute. Any ideas how I can address this. I have update the codepen from OP. thanks again!

[ZachSaucier]

4 hours ago, Yoram said:

I am trying to have the sentence all come along the shared path area (in green) and then once they reach the three splits (in pink) to each stick to their own lane.

They already seem to be doing that? The position is a little off, but that just takes adjusting the paths