Jump to content
GreenSock

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

Morph text expands

Recommended Posts

Hi,

I tried to convert svg text, but the result is not so good.

 

I try to change width of svg text (it's like this web https://markus.se/), but I don't understand well how it works, need multiple same svg text with different width or just 1 svg text to do away ?

 

Thank you for your help

Link to comment
Share on other sites

You could do morphing but that link you provided looks to me like they're just using a variable font. Maybe put each letter into a <span> and animate its fontWeight. 

 

If you still need help, please provide a minimal demo and we'd be happy to take a peek. 

  • Like 1
Link to comment
Share on other sites

This is my demo version.

 

Currently I use svg but need 2 svg to change path. So is there a way to use 1 svg and still do the same thing?

 

Thanks for your help

 

See the Pen qBmVZRq by rk856321 (@rk856321) on CodePen

  • Like 1
Link to comment
Share on other sites

No, if you plan to morph like that you'd need the end value too. You can't just have a start value :)

 

You could probably reduce that value quite a bit by limiting those numbers to 2 or maybe 3 decimal places. You've got a LOT of precision built in there which nobody will notice visually. 

 

And like I said, you could probably do this with variable fonts but it's totally up to you. 

 

Enjoy!

  • Like 2
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.

×