Jump to content
GreenSock

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

Scramble Text using existing content of div

Recommended Posts

Hi guys,

I am working through a project that uses ScrambleText on hover.

I cannot figure out how to simply scramble the EXISTING contents of a div. Everything I have found so far shows

how to REPLACE "text". Is it possible to only scramble the contents of a div? 

Thank you.

Link to comment
Share on other sites

Sure, you could just feed in the original text like this: 

See the Pen 5caeabd5220ed73bc2027bad4786a2a5 by GreenSock (@GreenSock) on CodePen

 

I think I'll add the ability to get the same behavior by setting text:"{original}" or by omitting the text value altogether. Does that seem wise? 

  • Like 2
Link to comment
Share on other sites

Thanks a million Jack! I was racking my brain trying to figure this out.  I think either way you mentioned above would be great to add as a convenience method. Thanks, Renard

  • Like 1
Link to comment
Share on other sites

No problem at all. And yes, I'll add that convenience stuff to make it even easier. Cheers!

Link to comment
Share on other sites

  • 1 year later...

When I did this on an SVG ( haven't tried with HTML ) using stagger, it used the content of the first text element for all of them

 

So I had to change this 

tl.staggerTo($totals, 2, { scrambleText: { chars: "0123456789", ease: Linear.easeNone}}, 0.2, "label");

 

to this 

$totals.each(function(i, el){
    tl.to(el, 2, { scrambleText: { chars: "0123456789", ease: Linear.easeNone}}, "label+=" + i*0.2);
})

 

 

Link to comment
Share on other sites

I updated the docs - thanks for the reminder. 

 

As for the SVG problem, I see what you mean. Sorry about that. It'd only affect scrambleText tweens with multiple targets. Here's a revised (codepen-only) version that should have that resolved: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ScrambleTextPlugin.min.js - Better? 

  • Like 1
Link to comment
Share on other sites

???

 

If I use that modified Scrambletext.js in my project I get this error

 

Quote

Uncaught SyntaxError: Invalid regular expression: /[-]|�[�-�]|�[�-�]|[⚔-⚗]|�[�-�]|[�-�][�-�]/: Range out of order in character class
    at new RegExp (<anonymous>)
    at ScrambleTextPlugin.min.js:13
    at ScrambleTextPlugin.min.js:13

 

I will keep using my manual loop anyway in this case, as I am now also checking for classes and applying other animations accordingly 

 

 

 

 

Link to comment
Share on other sites

Hm, you said that if you use the modified ScrambleTextPlugin.js in your project, you get an error - are you trying to use the codepen-only version? Can you tell me how I can recreate this error? Do you have a codepen demo that shows the problem? I just need to be able to recreate it on my end in order to troubleshoot effectively. Help? :)

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