Jump to content
Search Community

Scramble Text using existing content of div

rizzy3000 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 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

  • 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



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.
  • Create New...