Jump to content
Search Community

Animating text in on a path

turnerzajac test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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

 

 

Link to comment
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 10
  • Thanks 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...