Jump to content


Scrambletext length wrong (svg)

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



I have a small issue with the Scrambletext plugin using the wrong lengths for the text ( in an SVG )


Most of the strings start scrambling with too many characters, it also still happens if I define the 'text' parameter 


Can't work out why? Is there a workaround to force a specific length?


Thought it may be to do with the tspans, but I experimented with removing some and it didn't seem to make a difference





See the Pen jvZoqm?editors=1011 by bananafarma00 (@bananafarma00) on CodePen

Link to comment
Share on other sites

Interesting, I can see the issue you are reporting and can't really think of what is causing this. Maybe @GreenSock himself can shed some light. It could be how text behaves in SVG, it's not quite the same as in the DOM.


Hang tight and we'll look into the matter.

Link to comment
Share on other sites

Cool :)


Did some more tests, removed the tweens from the loop in case that was causing an issue. Also tried removing tspans, still the same result ( codepen below )


See the Pen yxKNdq?editors=1011 by bananafarma00 (@bananafarma00) on CodePen


Link to comment
Share on other sites

That's actually a bit of an illusion due to the fact that there are white space characters at the start and end of the strings. I just updated the codepen-only version of ScrambleTextPlugin so that it trims those by default (you can set trim:false if you DON'T want that behavior) - please clear your cache and give that a shot. Better? 

  • Like 6
Link to comment
Share on other sites



Yes fixed thanks :D


How can I get this updated non codepen only version?

Link to comment
Share on other sites

The new version is in the official downloads now, so just log into your account and snag it. 

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