Random ScrambleText and back

[anteksiler]

I am trying to achieve a similar effect on the menu elements on this site: http://www.kikk.be/2016/

 

As you can see, the text scrambles, and goes back,

 

This is my code here:

$('h1').each(function() {
	var _this = $(this),
			mySplitText = new SplitText(_this, {
			  type: "chars"
			}),
			newchars = '*?�><[]&@#)(.%$-_:/\\;?!azertyuopqsdghjklmwxcvbn'.split(''),
			randomchars = shuffleArray(newchars),
			letters = shuffleArray(mySplitText.chars),
			tl = new TimelineMax({ paused: true });

	$(letters).each(function(index, element){
	  tl
	  	.to(letters[index], 0.02, {scrambleText: randomchars[Math.floor(Math.random() * newchars.length)]}, index*0.02);
	});
	_this.hover(function() {
		tl.play();
	},function() {
		tl.reverse();
	});
});
function shuffleArray(array) {
    for (var i = array.length - 1; i > 0; i--) {
        var j = Math.floor(Math.random() * (i + 1));
        var temp = array[i];
        array[i] = array[j];
        array[j] = temp;
    }
    return array;
}

I am getting close, but it's taking some time Any help is appreciated.

See the Pen zoJLZN by anteksiler (@anteksiler) on CodePen

[Jonathan]

Hello anteksiler

 

Have you looked into using the GSAP ScrambleTextPlugin? GSAP already did the heavy lifting for you!

 

ScrambleTextPlugin Docs:

 

http://greensock.com/docs/#/HTML5/GSAP/Plugins/ScrambleTextPlugin/

 

Examples:

 

See the Pen dIBbw by GreenSock (@GreenSock) on CodePen

See the Pen kcoEq by rhernando (@rhernando) on CodePen

 

[anteksiler]

I am actually using the ScrambleText, but it does not give me the option to randomize the order, that's why I had to use SplitText to randomize the letters.

[Jonathan]

Are you trying to make it be random on every hover?

[anteksiler]

Yes, that would be ideal, and would like to only scramble random number of letters, not all of them.