Jump to content


ScrambleText Plugin div width

Go to solution Solved by Diaco,

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 am having the problem, that during the scramble the letters do not linebreak in the div with width: 100dw.

The site is going to be accessed by mobile devices.




Is there a way to force text during the scramble into the same layout as the final product?

See the Pen reMwdg by NashEquilibro (@NashEquilibro) on CodePen

Link to comment
Share on other sites

Thanks for the quick answer you guys are awesome.


I added the codepen. It works better with that whitespace, but still flickers out of the div.

Perfect would be if i could preserve the same space to prevent all the jumping.

Link to comment
Share on other sites

  • Solution

hmm , there's a tricky way to avoid that : 

See the Pen xVELWr by MAW (@MAW) on CodePen

  • Like 3
Link to comment
Share on other sites

I don't know if this is truly possible without using a mono-spaced font. However, you can get close by making some assumptions.


Option 1 - Not enough space

Find the height of the container before starting the animation. 

See the Pen b98916f59f3b1b699f73c8dd5a38ac0b?editors=0010 by osublake (@osublake) on CodePen


Option 2 - Too much space

Pre-fill the conainer with chars and then find the height. Generally "M" is the widest character, so you could try that.

See the Pen 9c3d6ce461908007673dceb1c9ae2bb5?editors=0010 by osublake (@osublake) on CodePen


That still leaves a lot of empty space. Since you're only using 1 and 0, try filling it with 0 since that's the widest character.

See the Pen a8348f51265e39b96b655d2f9681d0d9?editors=0010 by osublake (@osublake) on CodePen


Oh great, now it looks like the Option1!!!


Maybe somebody else can come up with a better solution because like I said, you can get close. 


  • Like 3
Link to comment
Share on other sites

  • 5 months later...

I'm dealing with the same thing.  I was hoping there was an option to keep the number of characters the same from start to end, keeping words and spaces in tact for wrapping.

Link to comment
Share on other sites

If your goal is to keep the line breaks the same, have you thought about using SplitText to split the lines apart (thus each line gets contained in its own <div>) and then doing your animation? 

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