Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
turnerzajac

Animating text in on a path

Recommended Posts

Hi guys,

 

I don't have a Codepen unfortunately as I'm unsure of what to look for. I have a client who has requested that their text animate in a way  similar towards this dribbble post they saw. It's pretty clear to me that this was made in AE or some other animating software and not code. I'm looking for a starting point on what this type of animation could be accomplished with.  My only thought right now is animating a SVG on a bezier curve? 

 

Anything would be helpful.

 

thanks in advance,

 

Turner

 

 

Share this post


Link to post
Share on other sites

Welcome to the forum. :)

 

You can check out the Bezier plugin:

https://greensock.com/docs/Plugins/BezierPlugin

 

The MorphSVG plugin has a .pathDataToBezier() method.

https://greensock.com/docs/Plugins/MorphSVGPlugin

 

You may also be able to make it work with a textPath animation. I wrote about that here:

Demo from that thread:

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

 

Hopefully that points you in the right direction. Happy tweening.

  • Like 5
  • Thanks 1

Share this post


Link to post
Share on other sites

Thanks @PointC  this looks to be exactly what I was looking for and should be a good start!  Much appreciated. 

  • Like 2

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×