Jump to content
GreenSock

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

Animating SVG text transforms

Recommended Posts

Hi! First time trying out the MorphSVG plugin and it's pretty cool! I'm trying to transition from one SVG text transform to another (and not the shape itself).

I know that gsap does not support morphing SVG text, but is there a way to transition from one transform to another? The text in my Codepen should slightly move.

See the Pen Yxddbv by DerLola (@DerLola) on CodePen

Link to post
Share on other sites

Hi @laurentvd :)

 

Welcome to the forum.

 

I'm not quite understanding your question. You don't want to morph the text, but want the text to move with the background morph? If that's the case, you could scale it along with the morph like this:

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

Is that what you meant? If that's not right, could you provide a few more details please?

 

Thanks and happy tweening.

:)

  • Like 3
Link to post
Share on other sites

Thanks for your reply PointC! I'm not really new to the forums, just not a very active member ;-)

 

And sorry for being unclear. I have a bunch of SVGs, made by a designer in Illustrator. The given SVG is just a random example and I removed many layers from it to make my question more clear (and failed at that). The text has to transform (rotate, move, scale) to whatever the designer has put in the SVG. The transformation in my example was just random really.

 

So I guess my question really is, can I tween from one transformation string to another?

Link to post
Share on other sites

Oh yeah- sorry - I saw the post count and thought you were still new.

 

If I understand your question, yes you can certainly animate from a rotation to a move to a scale etc. If you set those up on a timeline, you can overlap them quite easily too. Position parameter info:

https://greensock.com/position-parameter

 

Depending on what parts of the SVG you're animating, you may have to use the attribute plugin to accomplish your goals, but I can't imagine what you're tweening would be any problem as GSAP can animate any numeric property. 

 

More info on the attribute plugin:

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

 

Does that help?

 

Happy tweening.

:)

 

  • Like 1
Link to post
Share on other sites

Thanks again. I'm aware of the AttrPlugin, but does it transformation matrices? I mean, one <text> element has 

transform="matrix(0.9986 -5.233000e-02 5.233000e-02 0.9986 72.5351 173.9895)"

while the other one has

transform="matrix(0.9986 -5.233000e-02 5.233000e-02 0.9986 72.5351 163.9888)"

 

Does it know how to tween between those?

Link to post
Share on other sites

Ah yes, that's more like it. It's always a lot simpler than I think it is ;) I do however still have a weird thing where it's tweening to (what seems) a 0,0 position. See my updated pen.

 

See the Pen Yxddbv by DerLola (@DerLola) on CodePen

 

Link to post
Share on other sites

Thanks a lot for your help! I don't think I would've figured it out. The matrix with spaces comes from Illustrator, so for future reference, I've update my pen. Hopefully this will help someone else in the future. Thanks again.

 

See the Pen Yxddbv by DerLola (@DerLola) on CodePen

This automatically replaces spacing with commas.

  • Like 4
Link to post
Share on other sites

Happy to help. I'm just glad I finally figured out what you were asking. :D

 

Yeah - Illustrator does its best not to help us sometimes. Good solution with .replace though. Thanks for updating your pen - that will probably help someone in the future. Let us know if you need additional assistance.

 

Happy tweening.

:)

  • Like 4
Link to post
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.

×